Integrate your Adobe Fonts API token into your Webflow account to make all your Adobe font web projects available for any of your projects.
Note: We’re transitioning to Workspaces, and are in the process of updating our content. Visit the Workspaces blog post to read more about these updates and changes, or visit our updated lesson about integrating Adobe Fonts into a Workspace. You can also learn how to check if your account is on Workspaces.
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.
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 [↗]
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:
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.
If you wish to remove the API token from your account, delete the token and save the changes.
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.
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.
To remove a web project from your project’s font list, select None and Save changes.
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.
Sometimes Adobe Fonts integrations can fail to sync with Webflow and can usually be resolved with a few small steps.
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.
For most of these cases, check the following:
If the systems are up and running, follow the troubleshooter below:
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.
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.