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
In your Typekit account, hover over Kits, and click +Add 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 mapped to your Squarespace site, including all versions with and without "www." as well as your built-in .squarespace.com domain. This ensures that your fonts will always display no matter which URL is used to visit your site.
Click Embed Code.
Step 2 - Add your Kit ID
In the Home Menu, click Design, and then click Advanced.
Paste the Kit ID into the Typekit Kit ID box. Then click Save.
Step 3 - Add fonts to your Kit
Return to your Typekit account, and browse fonts in the Typekit library. Select a font, and then click +Use Fonts to add it to your kit. Each font you select will appear in font menus in the Style Editor.
Step 4 - Add CSS selectors
After adding fonts to your kit, you need to specify which elements of your site should use them. You can do this by adding CSS selectors.
In the Typekit Editor that opens, add the CSS selectors to apply each font you've added to your kit. Click Publish to apply the Typekit fonts to your site.
Note: Locating the CSS selectors in Typekit requires coding knowledge and use of our Developer tools. This falls outside of the scope of Squarespace support. To learn more, visit our Custom code FAQ.
Step 5 - 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.
If custom Typekit fonts aren't displaying on your site:
- Check the URL at the top of your browser to see if you're using a .squarespace.com domain. Some Typekit kits won't display when visiting your site using a .squarespace.com domain, such as "http://yoursitename.squarespace.com." Always point visitors to your custom domain or your .squarespace.com domain.
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.