Adobe Fonts (previously Typekit) is a service that offers a library of high-quality fonts. With our integration, you can select from over 1,000 Adobe Fonts for your site. You can also add a custom font project to your site.
These steps are for version 7.0. If your site's on version 7.1, visit Version 7.1 style and design options for help with fonts. Version 7.1 doesn't currently support adding custom fonts.
Select from our Adobe Fonts
Find our built-in Adobe Fonts in Site Styles.
In the Home Menu, click Design, and then click Site Styles. Follow the steps in Changing fonts to find the Font or Typography tweaks.
Font menus in Site Styles 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, use Adobe's tool for searching and previewing fonts. When you find an Adobe Font you like, search for its name in Squarespace.
Add custom fonts to Squarespace
To add custom Adobe Fonts to your site, use the following steps. This process replaces the Adobe Fonts options in the Site Styles menus with the fonts in your custom project. Squarespace's Adobe Fonts will still appear as options, but won't be available for use while your custom Adobe Fonts is enabled.
Note: Custom fonts are available with an Adobe Creative Cloud subscription. Before subscribing, choose a plan that includes Adobe Fonts.
Step 1 - Create a web project and add fonts
To add your custom fonts to Squarespace, you’ll first need to create a web project (previously called a "kit") in Adobe:
- Log into your Adobe Fonts account, then click Browse Fonts in the top-left corner.
- Scroll to browse all fonts, or add filters to revise the list.
- To save a font, click </>.
- In the window that appears, select Create a new project from the drop-down menu. If this is your first web project, click OK to get started.
- Enter a name for your project, then select all weights and styles for the font you want.
- Click Create.
- Confirm that everything looks correct, then click Done.
To add more fonts to this project, repeat the steps above and choose the existing web project from the drop-down menu.
Note: After creating your web project, you’ll see your customized HTML embed code. You won't need it, so don't add it to your site. Instead, you’ll use the next step to get the web project ID, which is a shorter set of letters and numbers.
Step 2 - Add your custom fonts to Squarespace
When your web project includes all the fonts you need, add the project to your Squarespace site using the project ID.
- In your Adobe Fonts account, click My Adobe Fonts in the top-right corner.
- Click Web Projects, then find the project you want to add to Squarespace.
- Copy the Project ID, which is a string of letters and numbers above the embed code.
- Log into your Squarespace site. From the Home Menu, click Settings, and then click Advanced.
- Click External API Keys.
- Scroll down to the Adobe Fonts Project ID box.
- Paste the Project ID you copied from Adobe into the box.
- Click Save.
Step 3 - Use your Adobe Fonts
After adding Adobe Fonts, you can apply them to text on your site. The fonts in your web project replace the built-in Adobe Fonts in Site Styles.
To quickly find a custom Adobe Font, search for it by name in the Search box.
Managing changes to your fonts
- If you change your Adobe Fonts, republish to show these changes on Squarespace. To learn more, visit Adobe's documentation.
- If Adobe Fonts removes a font you're using from their collection, the font will still load on your site. However, you won't be able to apply it to new text or switch back to it if you change it because it will no longer appear in Site Styles.
I see an "Unsupported Fonts" message in my Site Styles
You'll see this message if your site is using a font that Adobe Fonts 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.
Adobe Fonts will also remove any retired fonts from your Adobe Fonts page.
My custom Adobe Fonts fonts aren't displaying on my site
My font is hard to read on mobile devices
Font weights below 100 may look very light or dim on smaller mobile devices. To keep your text visible on all devices, open Site Styles and ensure the font weight is higher than 100.
Where to go for support
If you're having trouble adding your Adobe Fonts Project ID, or if Adobe Fonts aren't appearing in your site, contact us and we can help you troubleshoot. For all other questions about using Adobe Fonts, contact them or visit their documentation.