How can I ensure that the Typekit fonts I've attached to my project are visible on my page in design mode in Webflow?

Published on
September 22, 2023

To ensure that your Typekit fonts are visible on your page in design mode in Webflow, you need to follow these steps:

  1. Sign up for a Typekit account: If you don't already have an account, visit the Adobe Fonts website (previously known as Typekit) and sign up for an account.

  2. Select and sync your fonts: Once you have an account, browse through the wide selection of fonts available and choose the ones you want to use in your project. Click on the "+" button next to each font to add it to your collection. After you have selected your fonts, click on the "Use Fonts" button in the top right corner to sync them to your computer.

  3. Access the Webflow Designer: Log in to your Webflow account and open your project in the Designer.

  4. Navigate to the Fonts settings: In the Designer, click on the gear icon in the top right corner to open the project settings. Then, select the "Fonts" tab.

  5. Enable Typekit integration: In the Fonts settings, scroll down to the "Typekit fonts" section. Here, you will see a toggle button that says "Enable Typekit integration". Turn this toggle button on.

  6. Authenticate Typekit with your Webflow project: After enabling the Typekit integration, you will see a modal asking you to authenticate your Typekit account with your Webflow project. Click on the "Authenticate" button.

  7. Preview and use Typekit fonts: Once authenticated, you will see a panel displaying your Typekit fonts in the Fonts settings. You can now preview and use these fonts by selecting them from the dropdown menus for the different font styles and weights in your project.

By following these steps, you can ensure that the Typekit fonts you've attached to your project are visible on your page in design mode in Webflow. Remember to publish your site for the fonts to be visible on the live website.

Additional Questions:

  • How do I add custom fonts to my Webflow project?
  • Can I use Google Fonts in Webflow?
  • How do I change the font size in Webflow?