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 all available font options. Scroll down to browse our full library, or use the menu's search field to search for a specific font.
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
- In your Typekit account, hover over Kits, and click +Create New Kit.
- In the Create a Kit window, enter a name for your kit in the Name box.
- 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.
- Click Continue.
- In the Add your embed code window, click Continue.
Step 2 - Add fonts to your Kit
- In the Typekit window, click Browse all fonts.
- Return to your Typekit account, and browse fonts in the Typekit library.
- 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.
Step 3 - Publish
- After adding fonts to your kit, click Publish for the fonts to appear in the Style Editor.
Step 4 - Get your Typekit ID
- In the Typekit window, click Embed Code.
Step 5 - Add your Kit ID to Squarespace
- In the Squarespace Home Menu, click Design, and then click Advanced.
- 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.
I see an "Unsupported Fonts" message in my Style Editor
You'll see this message if your site is using a font that Typekit retired. When the font is no longer supported, we'll replace it on Squarespace with the closest match available. Review the style sections listed in the error to approve or change the replacement font.
Typekit will also remove any retired fonts from your Synced fonts page.
My custom Typekit fonts aren't displaying on my site
If none of your fonts are displaying, review these two steps:
- 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 firstname.lastname@example.org or visit their documentation.