Incorporate Adobe Type styles into a specific website

In another session, we demonstrate the process of embedding Adobe Type styles into your Webflow Workspace to ensure your Adobe Type styles are accessible across all your websites. However, if you are constructing a website for a customer and wish to utilize Adobe Type styles exclusively for that particular website, it is advisable to generate an Adobe Type API token exclusively for the customer and integrate it into the website.

There are two rationales for opting for this methodology:

• Adobe initiated the policy of mandating customers to possess individual Adobe accounts beginning in 2020. Explore further details regarding Adobe Type style licensing.
• Your customer will possess their unique set of font kits, and if they wish to transfer their website, the process of transfer will be significantly more streamlined.

Reminder: To embed Adobe Type styles into any website, you will require a paid Workspace plan or a paid site plan.

In this discussion, you will understand:

1. The method to acquire an Adobe Type API token
2. The process of embedding your API token into your website
3. The technique to eliminate your API token from your website
4. The procedure to link an Adobe web project to your website
5. The technique to detach an Adobe web project from your website
6. How to evaluate your typefaces in the Designer
7. The approach to address any integration difficulties

How to acquire an Adobe Type API token

If your customer possesses a Creative Cloud account (Adobe ID), request them to send you their API token. In the scenario where they do not have a Creative Cloud account, request them to establish their individual complimentary account and subsequently provide you with their API token.

Alternatively, you have the option to offer to configure it for them utilizing their login credentials and then transfer control to them. This will enable them to retain control of their type styles, alleviating your need to manage those styles within your personal Creative Cloud account.

Set up the account yourself and acquire the API token

If you decide to establish the account yourself:

1. Create an Adobe Type account
2. Generate web projects utilizing the typefaces you wish to utilize for your customer’s website
3. Navigate to the Adobe Type API tokens page and establish a new API token
4. Copy the API token

Request your customer to supply their Adobe Type API token

Should you desire your customer to establish their own account and forward you the API token, you can furnish them with the following instructions:

1. Develop an Adobe Type account (if they do not have one)
2. Construct web projects utilizing the following typefaces: [Provide the name of the typefaces you wish to utilize on their website]
3. Access the Adobe Type API tokens page and generate a new API token
4. Copy the API token and forward it to me

How to incorporate your API token into your website

Now that you have obtained the API token, you can insert it into your Webflow website’s Adobe typefaces settings. To include your API token in your website:

1. Navigate to Site settings > Fonts tab > Adobe typefaces
2. Paste your Adobe Type API token into the designated area
3. Click Save token

How to delete your API token from your website

In the event you wish to eliminate an API token from your website:

1. Access Site settings > Fonts tab > Adobe typefaces
2. Erase the token
3. Click Save token

How to tie an Adobe web project to your website

Upon successfully linking your Adobe account to your website through the API token, the Adobe web project containing all the typefaces for your website will be displayed under the Adobe typefaces section in Site settings.

To combine an Adobe web project with your website:

1. Navigate to Site settings > Fonts tab > Adobe typefaces
2. Select the web project you wish to associate
3. Click Save changes

How to disassociate an Adobe web project from your website

To separate an Adobe web project from your website:

1. Access Site settings > Fonts tab > Adobe typefaces
2. Select “None”
3. Click Save changes

How to validate your typefaces in the Designer

Within the Designer, you will have complete access to any typefaces and font variations you included through your Adobe web project. 

You can locate your Adobe typefaces in the Style panel > Typography > Font. Your Adobe typefaces will be listed at the conclusion of the font selection, arranged alphabetically.

How to address integration challenges

Occasionally, the integration of Adobe Type styles might experience synchronization issues with Webflow. Typically, these obstacles can be addressed by undertaking a few minor steps.

Some commonplace concerns consist of:

• Typefaces are not loading correctly in the Designer
• Web projects are not loading correctly in Site settings
• Web projects fail to load entirely in Site settings

Crucial:Adobe Type styles are governed by your Adobe Creative Cloud subscription. If you delete your web project from your Adobe Type styles library, or if your Adobe account becomes inaccessible, your selection of typefaces might fail to load.

Reminder: It may take up to 10 minutes for Adobe’s network to update, therefore if you do not observe your web project, or alterations in your web project, revisit and refresh the page at a later time. Alternatively, you can unbind the web project and then reselect it to load the most recent data from Adobe’s network.

To troubleshoot these difficulties, examine the following:

• Validate that both Adobe and Webflow systems are operational
• Verify that you have incorporated the API token in the correct location
• Confirm your Adobe Type API Token
• Validate that the accurate web project is chosen in your Site settings

Validate that Adobe and Webflow systems are operational

• Adobe Type styles systems status
• Webflow systems status

Ensure that you have integrated the API token in the correct location

Ensure that you have appended your Adobe Type API token to your website.

Confirm your Adobe Type API token 

1. Locate your Adobe Type API Token within Site settings > Fonts tab > Adobe typefaces
2. Proceed to the Adobe Type API tokens page
3. Confirm that your Adobe Type API Token corresponds to the API token you linked to your website

Validate that the correct web project is designated in your Site settings

1. Access Site settings > Fonts tab > Adobe typefaces
2. Ensure that the presently selected web project (the one bordered) is the accurate selection