Integrate Adobe fonts into an account

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

Integrating Adobe Fonts into any of your Webflow accounts (personal or team) enables you to use your Adobe Fonts in any of your Webflow projects in that account.

You can integrate Adobe Fonts into any project that has a site plan, or any of your projects if you have a paid Webflow account plan.
In this lesson
  1. Get an Adobe fonts API token
  2. Integrate your API token into your Webflow account
  3. ‍Remove the API token from your account
  4. Connect a web project to your Webflow project
  5. ‍Disconnect an Adobe web project from your project
  6. Use your Adobe Fonts in the Designer
  7. Troubleshoot issues with the integration

Get an API token

First, you’ll need an Adobe Fonts account [↗]. Once you’ve set up an account, create web projects with the fonts you want to make available for your Webflow projects.

Next, visit the Adobe Fonts API tokens  [↗] page. There, you can make a new API token and copy it to your clipboard. Alternatively, you could copy an old API token if you've generated one before.

Learn more: How to create Adobe Fonts web projects [↗]

Integrate your API token into your Webflow account

Now, that you have an API token, you can paste it in your Webflow account’s integrations settings. You can make your Adobe fonts available for:

  1. All projects in your individual dashboard
  2. All projects in a team account

Integrate Adobe Fonts into your personal account

To make your Adobe Fonts available for projects in your individual dashboard, paste your API token in your Account’s integration settings page and save the changes.

Open your Account settings, go to the integrations page, paste the Adobe fonts API token in the integrations section and save the changes.
Account settings → integrations → integrations → Adobe fonts API token

Remove the API token from your account

If you wish to remove the API token from your account, delete the token and save the changes.

Integrate Adobe Fonts into a team account

Adding your Adobe Fonts API token in your team account’s integrations settings enables everyone in your organization to use your Adobe Fonts web projects in projects that belong to that team’s dashboard.

Go to Teams, choose your team, then go to Integrations → Integrations. Paste your Adobe Fonts API key and save the changes.
Go to Teams, choose your team, then go to Integrations → Integrations. Paste your Adobe Fonts API token and save the changes.

Connect a web project to your Webflow project

Now that you’ve connected your Adobe account to your Webflow account, you can choose which web project to connect to each of your projects in that account’s dashboard. You can set this in the font integration settings of each project (Project settings → Fonts → Adobe Fonts).

Here, you’ll see all the Adobe web projects (formerly kits) in your Adobe fonts account. You can select the web project you want to use for the current project and save the changes.

‍‍Select your web project under Project settings → Fonts → Adobe Fonts, then save the changes.
Select your web project under Project settings → Fonts → Adobe Fonts, then save the changes.

Disconnect an Adobe web project from your project

To remove a web project from your project’s font list, select the "None" option and save changes.

Use your Adobe 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 the Style panel (S) → Typography section. The fonts list is ordered alphabetically.

Troubleshoot issues with the integration

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

Common issues
  • Fonts aren’t loading correctly in the Designer
  • Web projects aren’t loading correctly in the project settings
  • Web projects aren’t loading at all in the project settings
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.
Need to know 
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 the page later. You can also disconnect the web project and reselect it to load the most updated information from Adobe’s network.

For most of these cases, check the following:

  1. Verify that Adobe and Webflow systems are up and running
  2. ‍Verify that you’ve integrated the API token in the correct place
  3. ‍Verify your Adobe Fonts API Token
  4. ‍Verify that the correct web project is selected in your project settings

Verify that Adobe and Webflow systems are up and running

If the systems are up and running, follow the troubleshooter below:

Verify that you’ve integrated the API token in the correct place

If your project is in your personal dashboard, make sure you've added your Adobe Fonts API token to your individual account settings. Read more above.

If your project is in your Team dashboard, make sure you've added your Adobe Fonts API token to your Team settings and not your individual account settings. Read more above.

Verify your Adobe Fonts API Token

  1. Locate your Adobe Fonts API Token in the Account settings → integrations or in your Team settings
  2. Visit the Adobe Fonts API tokens [↗] page and confirm that the Adobe Fonts API Token is 100% correct

Verify that the correct web project is selected in your project settings

Go to your project’s Fonts settings page and check that the currently selected web project (the one with the blue outline) is the correct one.

Check that the selected web project has the fonts you’re looking for.
Check that the selected web project has the fonts you’re looking for.