Back to all lessons
Lesson library

Integrate Adobe Fonts into a Workspace

Integrate your Adobe Fonts API token into your Webflow Workspace to make your Adobe Font web projects available for any of your sites.

Note: We’re transitioning to Workspaces, and this lesson has been updated to reflect that change. Visit the Workspaces blog post to read more about these updates and changes.
If your account hasn’t yet switched over to Workspaces, please visit our legacy lesson about integrating Adobe Fonts into an account. You can also learn how to check if your account is on Workspaces.
This video features an old UI. Updated version coming soon!

When you integrate Adobe Fonts into your Workspace, you can use those Adobe Fonts in any of your Workspace sites. Additionally, you can use your Adobe Fonts in multiple Workspaces, within the same Webflow account.

Note: To integrate Adobe Fonts into any site, you need a paid Workspace plan or paid site plan.

In this lesson, you’ll learn:

  1. How to get an Adobe Fonts API token
  2. How to integrate your API token into your Workspace
  3. How to remove your API token from your Workspace
  4. How to connect a web project to your Webflow site
  5. How to disconnect an Adobe web project from your site
  6. How to use your Adobe Fonts in the Designer
  7. How to troubleshoot issues with the integration

How to get an Adobe Fonts API token

To get an API token:

  1. Create an Adobe Fonts account
  2. Create web projects with the fonts you want to make available for your Webflow sites
  3. Visit the Adobe Fonts API tokens page to make a new API token (if you’ve never generated one before)
  4. Copy the new API token (or copy an old API token, if you already have one)

Learn more about how to create Adobe Fonts web projects.

How to integrate your API token into your Workspace

To integrate your API token into your Workspace:

  1. Go to Workspace settings > Integrations tab > Adobe fonts
  2. Paste your Adobe Fonts API token into the field
  3. Click Save changes
The Adobe fonts section in the Integrations tab in Workspace settings.

How to remove your API token from your Workspace

If you want to remove an API token from your Workspace:

  1. Go to Workspace settings > Integrations tab > Adobe fonts
  2. Delete the token
  3. Click Save changes

How to connect a web project to your Webflow site

Now that you’ve connected your Adobe account to your Workspace, you can connect your Adobe web projects to your Webflow sites.

To connect an Adobe web project to your site: 

  1. Go to Site settings > Fonts tab > Adobe fonts
  2. Select the web project you want to use for the current site
  3. Click Save changes
An Adobe web project is selected and highlighted along with the ‘Save changes’ button in the Adobe fonts section.

How to disconnect an Adobe web project from your site

To remove an Adobe web project from your site:

  1. Go to Site settings > Fonts tab > Adobe fonts
  2. Select “None
  3. Click Save changes
The “None” option is selected and highlighted along with the ‘Save changes’ button in the Adobe fonts section.

How to 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. 

You can find your Adobe fonts in the Style panel > Typography > Font. Your Adobe fonts can be found at the bottom of the fonts list, ordered alphabetically.

How to troubleshoot issues with the integration

Sometimes the Adobe Fonts integration fails to sync with Webflow. This can usually be resolved in a few small steps.

Some common issues include:

  • Fonts aren’t loading correctly in the Designer
  • Web projects aren’t loading correctly in Site settings
  • Web projects aren’t loading at all in Site settings
Important: 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.

Note: Adobe’s network can take up to 10 minutes to update, so if you don’t see your web project, or updates in your web project, check back and refresh the page later. You can also disconnect the web project and reselect it to load the most updated information from Adobe’s network.

To troubleshoot these issues, check the following:

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

Verify that Adobe and Webflow systems are up and running

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

Make sure you’ve added your Adobe Fonts API token to your Workspace.

Verify your Adobe Fonts API Token

  1. Locate your Adobe Fonts API Token in Workspace settings > Integrations tab > Adobe fonts
  2. Visit the Adobe Fonts API tokens page
  3. Confirm that your Adobe Fonts API Token matches the API token you connected to your Workspace

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

  1. Go to Site settings > Fonts tab > Adobe fonts
  2. Check that the currently selected web project (the one with a border) is the correct one
An Adobe web project is selected in the Adobe fonts section.
Try Webflow — it's free