How To Add Adobe Fonts To Webflow

Quick summary

This tutorial shows how to integrate Adobe Fonts with Webflow by generating an API token in Adobe Fonts and entering it in the Webflow Apps & Integrations settings. Once connected, you can select a Web Project from Adobe Fonts and apply any of its fonts directly inside the Webflow Designer.

Steps

1. Open the Adobe Fonts website and click on your profile in the top right.
2. Navigate to API Tokens in your account settings.
3. If you don't have an existing token, click Make me a new API token to generate one.
4. Copy your API token to the clipboard.
5. Go to your Webflow Dashboard and open Apps & Integrations from the left sidebar.
6. In the Adobe Fonts section at the top, paste the API token into the input field.
7. Click Save to store the token.
8. A notification will confirm whether the connection was successful.
9. Return to the Adobe Fonts website, browse fonts, and click the </> icon to add fonts to a Web Project.
10. If you have no existing Web Project, follow the prompt to set one up.
11. Give your new Web Project a name.
12. Click Create to create the Web Project.
13. Click Done to finish the setup.
14. Continue adding more fonts to the collection as needed.
15. Back in the Webflow Dashboard, click the three-dot icon on your site and select Settings.
16. In Site Settings, open the Fonts tab from the left sidebar.
17. Scroll to the Adobe Fonts section and select your newly created Web Project.
18. Click Save to apply the Web Project to your site.
19. Inside the Webflow Designer, select any element and open the Typography section in the right sidebar.
20. Click on Font to view the list — your Adobe Fonts will now be available for use.