How to use custom fonts from Adobe Fonts in Webflow

You may have used Google fonts in your web projects in the past and sometimes you may not always find the right font for your project.

Adobe Fonts (formerly called Typekit), is another web font service that is included with Adobe Creative Cloud subscriptions.

In this article, I explain how to add Adobe fonts into your Webflow projects.

Go to the Adobe Fonts and sign into your Adobe account

Browse for fonts you like and add them into your web project

Get an Adobe Fonts API token

Visit the Adobe Fonts API tokens page, where you can paste your Adobe Fonts Token API in and save the changes. Alternatively, you could copy the existing API token if you've generated one before.

Integrate your API token into your Webflow account

Log into your Webflow dashboard and navigate to Account Settings from your avatar dropdown menu which is located in the top right of the window.

In the Account Settings page, navigate to the Integration tab where you can paste your Adobe Fonts API in and save the change.

Now you have connected your Adobe account to your Webflow account.

Connect Adobe web project to your Webflow project

Navigate to your Webflow project settings page and click on the Fonts tab. Scroll to the Adobe Fonts section, and you will see all the Adobe web projects in your Adobe Fonts account. Select the web project you want to use for the current Webflow project and save changes.

Use your Adobe Fonts in the Designer 🙌

In the Designer, you will have full access to any fonts and font weights you added through your Adobe web project.

You now can use the font you just added in the Style panel → Typography section.