Adobe Fonts (formerly Typekit)

Adobe fonts is home to some of the most popular fonts on the planet. If you have a premium Webflow account, you can integrate Adobe fonts into your Webflow projects. It’s one of three native ways to bring extra typography options into your Webflow project. The other two are: Google Fonts and Custom fonts.

In this lesson
  1. Integrating Adobe fonts into your Webflow account
  2. Connecting your web project to your project
  3. Testing your fonts in the Designer
  4. Troubleshooting the Adobe font integration
Before you get started

Make sure you have an Adobe fonts account and that you've created separate web projects with the fonts you want to use for each of your Webflow projects.

Integrating Adobe fonts into your Webflow account

To integrate Adobe fonts into your Webflow account, you'll need to:

  1. Get an Adobe fonts API key
  2. Integrate your API key into your Webflow account

❶ Get an API key

To get your API key, email Adobe font support (fontsupport@adobe.com).

❷ Integrate your API key into your Webflow account

Now, you can paste that key in your Webflow account(s).

Integrating Adobe fonts into your personal account

Go to Account settings → integrations → integrations → Adobe fonts API key and paste in your API key. Save the changes.

Integrating Typekit into your personal account

Integrating Adobe fonts into a team account

Go to Teams, choose your team, then go to integrations → integrations → Adobe fonts API key and paste in your API key. Save the changes.

Integrating Typekit into a team account

Connecting your Adobe web projects to your project

To connect an Adobe web project to a specific project, go to that project's settings → fonts → Adobe fonts, all your Adobe web projects (formerly kits) will appear. Select the web project you want to use in the current project and save the changes.

 
Known issues - troubleshooting
Adobe’s network can take up to 10 minutes to update. So, if you do not see your web project or your updates in your web project, check back or refresh this page later. 
You can also clear the web project (select none) and reselect it to load the most updated information from Adobe’s network.
If you're still experiencing issues, troubleshoot the integration.

Testing your fonts in the Designer

In the Designer, you’ll have full access to any fonts and font weights you added through your Adobe web project. Just browse for the font you need in Style (s) →typography → font. The fonts list is ordered alphabetically.

 
Must know
Adobe fonts are licensed through your Adobe Creative Cloud subscription. If you remove your web project from your Adobe fonts library, or your Adobe account becomes inaccessible, your font selection might not load.

Troubleshooting your Adobe fonts integration

Sometimes Adobe fonts integrations can fail to sync with Webflow and can usually be resolved with a few small steps.

Check the following

If your project is in your Team dashboard, make sure you've added your Adobe fonts API Key to your Team dashboard settings and not your individual account settings.
If you've recently changed your site's domain (perhaps from a Webflow subdomain to a custom domain), go to project Settings → fonts, re-select the Adobe web project, and save the changes.
Check that Adobe fonts systems are up and running at 100%
Check that Webflow systems are up and running at 100%

Verify your Adobe fonts API Token

  1. Locate your Adobe fonts API Token in the Account settings → integrations or in your Team settings.
Your Adobe fonts API Token is located in the Integrations tab in your Account settings
If you're using Adobe fonts in your Team projects, your API Token is located in the Integrations tab in your Team settings
  1. Email Adobe fonts support (fontsupport@adobe.com) and confirm that the Adobe fonts API Token is 100% correct.