Add Adobe Fonts to a Workspace

Once you incorporate Adobe Fonts into your Workspace, you gain the ability to utilize those Adobe Fonts across all your Workspace sites. Furthermore, you have the flexibility to leverage your Adobe Fonts in multiple Workspaces within the same Webflow account.

Important: For the inclusion of Adobe Fonts within any site, a valid Workspace plan or a valid site plan is necessary.

Within this tutorial, you will learn:

1. The process of acquiring an Adobe Fonts API token
2. The procedure to integrate your API token into your Workspace
3. How to remove your API token from your Workspace
4. Connecting a web project to your Webflow site
5. Disassociating an Adobe web project from your site
6. Utilizing your Adobe Fonts in the Designer
7. Troubleshooting integration issues

Acquiring an Adobe Fonts API Token

To obtain an API token:

1. Register an Adobe Fonts account
2. Establish web projects with your desired fonts for use in your Webflow sites
3. Navigate to the Adobe Fonts API tokens page to create a new API token (if you haven’t generated one previously)
4. Copy the newly generated API token (or an existing one if available)

Discover more about creating Adobe Fonts web projects.

Integrating your API Token into your Workspace

To successfully embed your API token into your Workspace:

1. Access Workspace settings > Integrations tab > Adobe fonts
2. Paste your Adobe Fonts API token into the designated field
3. Select Save changes

Removing your API Token from your Workspace

Should you wish to eliminate an API token from your Workspace:

1. Navigate to Workspace settings > Integrations tab > Adobe fonts
2. Erase the token
3. Click on Save changes

Linking a Web Project to your Webflow Site

Now that your Adobe account is linked to your Workspace, you can associate your Adobe web projects with your Webflow sites.

To establish a connection between an Adobe web project and your site: 

1. Access Site settings > Fonts tab > Adobe fonts
2. Choose the web project you wish to use for the current site
3. Click Save changes

Disconnecting an Adobe Web Project from your Site

To disassociate an Adobe web project from your site:

1. Navigate to Site settings > Fonts tab > Adobe fonts
2. Select “None”
3. Click on Save changes

Utilizing your Adobe Fonts in the Designer

When operating in the Designer, you have complete access to all fonts and font variations you’ve integrated through your Adobe web project. 

Your Adobe fonts are located in the Style panel > Typography > Font. They can be found at the end of the fonts list in alphabetical order.

Resolving Integration Issues

At times, the sync between Adobe Fonts and Webflow may encounter obstacles. However, these issues can typically be addressed through a few simple actions.

Common problems include:

• Incorrect loading of fonts in the Designer
• Failure to load web projects correctly in Site settings
• Complete absence of web projects in Site settings

Crucial: Adobe Fonts are regulated through your Adobe Creative Cloud subscription. If you remove a web project from your Adobe Fonts library or lose access to your Adobe account, your chosen fonts may not load.

Important: Adobe’s network may take up to 10 minutes to update, so if you don’t see your web project or the updates within it, revisit and refresh the page later. Alternatively, disconnect and reconnect the web project to load the most recent information from Adobe’s network.

To tackle these issues, consider the following:

• Ensure that both Adobe and Webflow systems are operational
• Check the correct placement of the API token
• Verify the validity of your Adobe Fonts API Token
• Confirm the appropriate web project selection in your Site settings

Verify the operational status of Adobe and Webflow systems

• Status of Adobe Fonts systems
• Status of Webflow systems

Check the correct placement of the API token

Ensure that you have successfully 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 the match between your Adobe Fonts API Token and the token connected to your Workspace

Confirm the correct web project selection in your Site settings

1. Proceed to Site settings > Fonts tab > Adobe fonts
2. Ensure the currently selected web project (indicated by a border) is the correct one