Integrate Adobe Fonts into a specific site
If you’re building a website for a client, and you want to use Adobe Fonts for that project, it’s good to create an Adobe Fonts API token specifically for the client and integrate it into the project. Read more: https://wfl.io/2XCXrXO
Video transcript
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.
