How to Integrate Adobe Typekit Fonts in Your Squarespace Website - dummies

How to Integrate Adobe Typekit Fonts in Your Squarespace Website

By Kris Black

Squarespace 6 has integrated with Typekit to easily allow you to use custom Typekit fonts more easily. Before you can add custom Typekit fonts to your Squarespace site, however, you need to have a Typekit account and to select the fonts to use on your site.

Simply log in to your Squarespace site, open Style Editor, and click any of the typography elements in the Style Editor list. In the font list, the fonts are divided into three groups: websafe fonts, a small list of fonts commonly found on all computers; fonts by Typekit, a decent size selection of professional fonts from Typekit; and Google fonts, a large selection of fonts from Google Webfonts.

The Typekit list that you see is just a small sampling of the fonts Typekit offers. You can browse all the fonts offered by Typekit. To use a Typekit font that is not in the font list in Style Editor, you need a Typekit account.

Here’s how to acquire Typekit fonts:

1Sign up for a Typekit account.

Choose the pricing plan that’s right for you from Typekit. The pricing plan determines how many fonts you can access.

Typekit offers a free trial account that doesn’t expire.

2Browse the fonts in the Typekit library.

When you find a font you like, click the Create a Kit button.

3Create your Kit.

In the window that appears, give your Kit a name and list any domains used to access your site. Be sure to include your Squarespace account URL ( and a custom domain ( if you’ve added one to your site.

4Click the Continue button.

The Install JavaScript screen appears. You can ignore the JavaScript code because you won’t need to use the code on your site. Squarespace has a more integrated solution for connecting to a Kit in your Typekit account.

5Click the Continue button.

The Typekit Editor screen appears with the font you selected in Step 2.

6Click the Publish button.

This saves your Kit.

7Get your Kit's ID.

Click the Embed Code link in the top-right corner of the Editor screen. A dialog box appears, displaying JavaScript code. Ignore the JavaScript code, but copy the Typekit Kit ID, which appears in the bottom right.

8Add the Kit ID to your Squarespace site.

Log in to your site and add the ID in Site Manager→Settings→General→Typekit Kit ID setting.

9Save your changes.

Any fonts you add to your Kit in Typekit will replace the default list of Typekit fonts and will be displayed in all font lists in Style Editor.