Lesson info

Typekit is home to some of the most popular fonts on the planet. And it’s one of three native ways to bring extra typography options into your Webflow project. The other two are: Google Fonts and custom fonts.

There are four steps involved when you’re first setting up Typekit in Webflow, and we'll walk you through each in this video:

  1. Integrating your Typekit account into your Webflow account
  2. ‍Creating and publishing your kit on Adobe’s site
  3. ‍Connecting your kit to your Webflow project
  4. ‍Testing your font selection in the Webflow Designer

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

Typekit is home to some of the most popular fonts on the planet. It’s another one of our three ways to bring additional typography options into your Webflow project.

There are four steps involved when you’re first setting up Typekit in Webflow. And we’re going to cover each of these steps: We have to integrate our Typekit account into our Webflow account;

we’ll create and publish our kit on Adobe’s site; we’ll connect that kit to our Webflow project, and we’ll test our font selection in the Webflow Designer.

Let’s start with integration: linking Adobe Typekit to Webflow. Two ways to do this: We can go to our Account Settings, under Integrations, or from any project, we can go to our Project Settings, under Fonts, and click the link under Adobe Typekit. And both options will get you to the same place.

To get your Typekit API key, go to the Adobe account page. If you’re not already logged in, or your need to create an Adobe ID, you can of course do that here.

You can also access the account page through Typekit.com once you're browsing fonts. To do that, click Account on the top-right. And once there, look for the “Manage” button under API access. You can make a new API key and copy it right to your clipboard.

Back over in Webflow, under Integrations, you can paste in your key before saving your changes.

That’s it — that's step one. That’s integrating our Typekit info with Webflow.

Now we’re free to begin creating a kit. So, from the Typekit website, you can browse, test, and select the fonts you want to add to your kit. Here, we'll demonstrate clicking Add to Kit, where we're given the option to Create a Kit.

And when you do that, you can give your kit a name. Now adobe requires that you enter a domain here for now you can put anything you’d like, because Webflow will automatically link up your site later on in the process.

After adding your font selection, you can choose from the options on the left to customize. Publish the changes, and you can head back over to Webflow.

That’s creating your kit.

Now we can head back over at any time to our Project Settings, and of course from there, we can access our fonts tab. And once we're there, we’ll have access to the new Kit we created.

If you’ve created additional kits, they’ll show up here, too. Just select the kit you want to use in your project, then press Save Kit Changes.

If you don’t see your kit right away, or if you make a change to a kit on Adobe’s site and that change doesn’t immediately appear in the Designer, realize that Adobe’s network can take up to 10 minutes to update, so check back or refresh this page a little bit later. You can also clear the kit and reselect it to load the most updated information from Adobe’s network.

That’s connecting a kit directly to a project.

Now let’s test drive these fonts in the Designer. And from the Designer, you’ll have full access to any fonts and fonts weights you added through your kit.

And that’s it! That’s how to get Typekit linked up with Webflow.

A quick piece of Typekit trivia: keep in mind that fonts through Typekit are licensed through your Adobe membership. Whether or not you’re using Webflow or Bootstrap or hand-coding a site, if you create content using Typekit fonts and later remove your kit from Adobe, or your Adobe account becomes inaccessible, your font selection might not properly load.

So, that’s integrating Adobe Typekit right into your project.

Related tutorial

Adobe Typekit Fonts

2:59