Integrate Adobe fonts into a specific project

In a separate lesson, we show you how to integrate Adobe Fonts into your Webflow accounts to make your Adobe Fonts available in all your projects. However, if you’re building a website for a client, and you want to use Adobe Fonts for that project, it’s wiser to create an Adobe Fonts API token specifically for the client and integrate it into the project.

Among the many reasons to adopt this approach is the fact that Adobe will begin requiring clients to have their own Adobe accounts starting in 2020. Learn more about Adobe Font licensing [↗]. Another important reason is that your client will own their own font kits, and if they want their project transferred, the handoff will be much easier.

To integrate Adobe Fonts into any project, you need a site plan or a paid account plan.

In this lesson

1. Get an Adobe fonts API token
2. Integrate the API token into your project
3. ‍Remove an API token from a project
4. Connect a web project to your project
5. Test your fonts in the Designer
6. Migrate Adobe Fonts from your account to client projects
7. Troubleshoot issues with the integration

Get an API token

If your client has a Creative Cloud account (Adobe ID) [↗], ask them to send you their API token. If they don’t, ask them to set up their own free account, then send you their token.

Alternatively, you can offer to set it up for them using their own credentials and then hand it over to them. That way, they get to keep control of their fonts, without you needing to manage those fonts within your own account.

Set the account yourself and get the API token

If you want to set up the account yourself:

1. Create an Adobe Fonts account [↗]
2. Create web projects [↗] with the fonts you want to use for their project
3. Visit the Adobe Fonts API tokens page [↗] and make a new API token
4. Copy the API token to your clipboard

Ask your client to provide their Adobe Fonts API token

If you want your client to set up their own account and send you the API token, send them the following instructions:

5. Create an Adobe Fonts account [↗] (if they don’t have one)
6. Create web projects [↗] with the following fonts: [Provide the name of the fonts you want to use in their project]
7. Visit the Adobe Fonts API tokens page [↗] and make a new API token
8. Copy the API token to your clipboard and send it to me

Integrate your API token into your project

Now, that you have the API token, you can paste it into your Webflow project’s Adobe Fonts integration settings.

Remove an API token from a project

If you wish to remove an API token from a project, delete the token and press "save token."

Connect a web project to your project

Once you’ve connected your Adobe account to your project, the Adobe web project that has all the fonts for this project will appear below your Adobe Fonts settings. Select the web project and save the changes.

Disconnect an Adobe web project from your project

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

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

Migrate Adobe Fonts from your account to client projects

If you’re using your own Adobe Fonts API for client sites, you’ll need to migrate client fonts to their own Adobe accounts before Adobe updates their terms of use on 1 January, 2020.

Learn more: About Adobe Font licensing [↗]

To comply with the new Adobe Fonts terms, you'll need to add separate Adobe Fonts API tokens for each client project. Follow the guide above to:

1. Get the client's API token
2. Make sure they have a web project with the same fonts currently being used in their project
3. Add the token in the project
4. Choose the new web project with the same fonts
5. Save the settings
6. Test the fonts in the Designer, make sure they are working correctly
7. Publish or export the site

Troubleshoot issues with the integration

Sometimes Adobe Fonts integrations can fail to sync with Webflow and can usually be resolved in 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

• Adobe Fonts systems status [↗]
• Webflow systems status

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

Go to the Project settings of the project you are troubleshooting. Open the Fonts settings page and scroll to the Adobe Fonts section. Make sure that the API token is added and saved.

Verify your Adobe Fonts API token

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 a blue border) is the correct one.