Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Using Typekit with Squarespace

Typekit is a service by Adobe that offers a library of high-quality fonts. With our integration, you can select from over 1000 built-in Typekit fonts for your site. You can also use Typekit to add a custom font kit to your site.

Select from our Typekit fonts

In the Home Menu, click Design, and then click Style Editor. Follow the steps in Changing fonts to find the Font or Typography tweaks.

Font menus in the Style Editor include a curated selection of popular Typekit and Google Fonts, saving you from scrolling through all options.

If the font you want isn't listed, scroll to the bottom of the menu and click Show All Fonts, or search for it by name in the Search box.

Tip: If you don't have a font in mind, Typekit has an excellent resource for finding and previewing their fonts here. Once you find a Typekit font you like, search for it in Squarespace.

Add custom Typekit fonts

If you have a custom font with Typekit, follow these steps to use it for your Squarespace site. Note that following these steps will replace the Typekit options in the Style Editor's menus with the fonts in your custom kit. Squarespace's Typekit fonts will still appear as options, but won't be available for use while your custom Typekit is enabled.

Considering the number of built-in fonts available, you might only need to use this option if you have your own font in Typekit.

Note: Custom fonts are available in Typekit's Portfolio and Performance plans.

Step 1 - Create a Kit

  1. In your Typekit account, hover over Kits, and click +Create New Kit.

1.CreateNewKit.png

  1. In the Create a Kit window, enter a name for your kit in the Name box.
  2. In the Domains box, add every domain registered or connected to your Squarespace site and your built-in domain. This ensures that your fonts will always display no matter which URL is used to visit your site. 
  3. Click Continue.

2.CreateAKit.png

  1. In the Add your embed code window, click Continue.
Note: You'll see windows with JavaScript code here, but don't add this JavaScript to your Squarespace site. Continue the process until you've generated your Typekit Kit ID, which is a shorter set of letters and numbers.

Step 2 - Add fonts to your Kit

  1. In the Typekit window, click Browse all fonts

TypekitFonts.png

  1. Return to your Typekit account, and browse fonts in the Typekit library.
  2. Select a font, and then click <>Add to Kit to add it to your kit. Each font you select will appear in font menus in the Style Editor.

5.AddToKit.png

 

Step 3 - Publish

  1. After adding fonts to your kit, click Publish for the fonts to appear in the Style Editor. 

Publish.png

Step 4 - Get your Typekit ID

  1. In the Typekit window, click Embed Code.

  1. Copy the Typekit Kit ID that appears below the default JavaScript embed code.

4.EmbedCode.png

Step 5 - Add your Kit ID to Squarespace

  1. In the Squarespace Home Menu, click Design, and then click Advanced.

  1. Paste the Kit ID into the Typekit Kit ID box. Then click Save.

 

Step 6 - Use your Typekit font

After adding Typekit fonts, you can apply them to text on your site. The fonts in your kit replace the built-in Typekit fonts in the Style Editor.

To quickly find your custom Typekit Font, search for it by name in the Search box.

If Typekit removes a font that appears on your site, the font will continue to load on your site. However, the font won't appear in the list of Typekit fonts in the Style Editor.

Tip: If you change your Typekit, republish to show these changes on Squarespace. To learn more, visit Typekit's documentation

Troubleshooting

If custom Typekit fonts aren't displaying on your site:

  1. Check any JavaScript you added to your site. If you ever used Typekit's JavaScript method to add fonts to your site, your fonts may not load properly. Remove the JavaScript and follow the steps above to add your Typekit fonts.
  2. In Typekit, make sure you add all domains connected to your Squarespace site, including your built-in domain (http://yoursitename.squarespace.com). Typekit fonts only appear when visiting a domain added in Step 1 of this guide. 

Note: Squarespace can help you set up this integration with Typekit. If you're experiencing issues adding your Typekit Kit ID or if Typekit fonts aren't appearing, open a ticket, and we can help you troubleshoot. For all other questions about using Typekit, contact them at support@typekit.com or visit their documentation.

Was this article helpful?
24 out of 71 found this helpful
Using Typekit with Squarespace