How to use custom fonts from Adobe Fonts in Webflow

13
April
2019
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

Screenshot of the Adobe Fonts - account login

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

Screenshot of Adobe Fonts - browsing fonts

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.

Screenshot of Adobe Fonts - API token

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.

Screenshot of Webflow - Adobe Fonts API token settings

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.

Screenshot of Webflow - connect Adobe web project

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 panelTypography section.

Screenshot of Webflow - typography selection