Integrate your client's Adobe Fonts API token into their project to make their Adobe font web projects available for that project.
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 how to integrate Adobe Fonts into a specific site. You can also learn how to check if your account is on Workspaces.
If you’re setting up Adobe Fonts for your clients, all you need to do is follow these three steps: (1) get an Adobe Fonts API token, (2) paste it into your Webflow project, and (3) that’s it. We’re putting a third step here because you’ll probably end up testing and using these fonts, but it’s that simple.
First step. Getting the API token. We have to first add at least one font to what Adobe calls a Web Project. (That’s essentially a bucket — a Web Project is a bucket containing any fonts you’re going to be using on a particular project.)
So. Where can we find our API token? We’ll just go to the top, and click API tokens. From there, we can click to create one. Then we’ll copy it to our clipboard. If you’ll glance to the bottom-left of this video, we’ll add an on-screen note that gives you this helpful keyboard shortcut. And we’ll leave it on the screen for a while. So you can both commit the shortcut to memory and better understand what it does.
That’s #1. #2. In the Webflow project (the project you’re using these fonts in), we’re going to go to our site settings (under fonts).
(That’s where we’ll find what we’re looking for.) And we can paste in the Adobe Fonts API token. All we have to do? Is save. And right after we do that, we see something familiar. It's the Web Project we created earlier on the Adobe Fonts website. So. Let's select it — this way we can start using it for our current project. And save. That's it.
#3. From the Webflow Designer, access the fonts we added.
Now. Keep in mind: this lesson taught us how to link Adobe Fonts to a project. Why? Because when you create websites for others, Adobe is starting to require each of them (each of your clients) to have their own Adobe Fonts account. If you’re looking to use your own Adobe Fonts on multiple Webflow projects that you own, you can do this at the account level. We have a separate guide available on this over at Webflow University.
But that’s it — that’s integrating 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.
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.
If you want to set up the account yourself:
If you want your client to set up their own account and send you the API token, send them the following instructions:
Now, that you have the API token, you can paste it into your Webflow project’s Adobe Fonts integration settings.
If you wish to remove an API token from a project, delete the token and press "save token."
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.
To remove a web project from your project’s font list, choose "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.
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:
Sometimes Adobe Fonts integrations can fail to sync with Webflow and can usually be resolved in a few small steps.
Common issues:
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.
For most of these cases, check the following:
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.
Visit the Adobe Fonts API tokens [↗] page and confirm that the Adobe Fonts API Token is 100% correct.
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.
Something went wrong while submitting the form. Please contact support@webflow.com