Typekit is home to some of the most popular fonts on the planet. You can integrate Adobe Typekit fonts into your Webflow projects. 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.

In this lesson
  1. Integrating Typekit into your Webflow account
  2. Creating and publishing your kit
  3. Connecting your kit to your project
  4. Testing your fonts in the Designer
  5. Troubleshooting your Typekit integration

Integrating Typekit into your Webflow account

To integrate Adobe Tyepkit into your Webflow account, you'll need to:

  1. Get a Typekit API key
  2. Integrate your API key into your Webflow account

Get a Typekit API key

To get your API key:

  1. Go to the Typekit account page. If you're not logged it, log in to your account. If you do not have an account, create a new Adobe ID.
  2. Go to Account → API access → Manage
  3. Make a new API key
  4. Copy it to your clipboard
 

Integrate your API key into your Webflow account

Now, you can paste that key in your Webflow account(s).

Integrating Typekit into your personal account

  1. Go to Account Settings → Integrations →Integrations
  2. Paste in your API key
  3. Save the changes
Integrating Typekit into your personal account

Integrating Typekit into a team account

  1. Go to Teams → {Choose your team} → Integrations → Integrations
  2. Paste in your API key
  3. Save the changes
Integrating Typekit into a team account

Creating and publishing your kit

From the Typekit website, you can browse, test, and select the fonts you want to add to your kit.

Add a font to your kit

  1. Click the font
  2. Click Web view: Add to Kit
  3. Create a new kit (or add it to an existing kit)
  4. Give your new kit a name
Need to know
  • ‍Adobe requires that you enter a domain here. You can add any link you’d like, because Webflow will 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.

 

Connecting your kit to your project

Now, you'll be able to see the kit you created in Typekit (along with other kits you've created) in your Webflow dashboard.

  1. Head to Project Settings → Fonts → Adobe Typekit
  2. Select the kit you want to use in your project
  3. Save the changes
 
Known issues - troubleshooting
  • Adobe’s network can take up to 10 minutes to update. So, if you do not see your kit or your updates in your kit, check back or refresh this page later. 
  • You can also clear the kit and reselect it to load the most updated information from Adobe’s network.
  • If you're still experiencing issues, troubleshoot the Typekit integration.

Testing your fonts in the Designer

In the Designer, you’ll have full access to any fonts and font weights you added through your kit. Just browse for the font you need in Style (s) →Typography → Font. The fonts list is ordered alphabetically.

 
Must know
  • Typekit fonts are licensed through your Adobe membership. If you remove your kit from Adobe, or your Adobe account becomes inaccessible, your font selection might not load.

Troubleshooting your Typekit integration

Sometimes Adobe Typekit font integrations can fail to sync with Webflow and can usually be resolved with a few small steps.

Check the following

  • If your project is in your Team Dashboard, make sure you've added your Typekit API Key to your Team Dashboard settings and not your individual account settings.
  • If you've recently changed your site's domain (perhaps from a Webflow subdomain to a custom domain), go to Project Settings → Fonts, re-select the kit, and save the changes.
  • Check that Adobe Typekit systems are up and running at 100%
  • Check that Webflow systems are up and running at 100%

Verify your Typekit API Token

  1. Locate your Typekit API Token in the Integrations tab in your Account settings or in your Team settings.
Your Typekit API Token is located in the Integrations tab in your Account settings
If you're using Tyepkit in your Team projects, your Typekit API Token is located in the Integrations tab in your Team settings
  1. Visit your Adobe Tyepkit Tokens page and confirm that the Typekit API Token is 100% correct.
Make sure your Typekit API Token is 100% correct.

Confirm your Typekit domain settings

  1. To access the domain settings of your kit, follow the Tyepkit documentation on how to edit the domain list for your kit.
  2. Add the following domains to the Domains field:webflow.com,your-site.webflow.io(Webflow subdomain),your-custom-domain.com(custom domains; add all that apply),blog.your-custom-domain.com(custom subdomains; add all that apply).
  1. Save the settings and publish your Typekit Kit settings
  2. Publish your Webflow site
Must know
  • It can take up to 24 hours for your kit’s settings to update in Typekit. If your fonts are still not loading as expected after 24 hours, contact us and we'll help you resolve your issue!

Check your Typekit's usage limits

Make sure your Typekit plan has not reached its usage limits. You can check that in Your Usage section in your Typekit Account Settings.

Must know
  • Typekit plans have limits on how many fonts can be synced at a given time as well as how often those fonts can be viewed in a webpage. If you have exceeded these limits, you can upgrade your Typekit plan.
Helpful links