Typekit Fonts

Easily integrate Typekit fonts on your site by using the Typekit module.

Obtain Typekit Token

First you need to obtain your Typekit Token:

1. Visit Typekit and log in to your account.
2. Go to the Tokens page.
3. Copy the Typekit Token to clipboard.

Create Font Kit

Then create a Typekit font kit:

1. Find a font, that you would like to use.
2. Click on Add to Kit.
3. Either create a new kit or use an existing one.
4. Make sure that your domain is in the list of allowed domains in Kit Settings.
5. Save your kit settings by clicking Save Settings.
6. Publish your kit by clicking Publish.

Integrate Typekit

Then follow these steps to add Typekit fonts to your website.

1. First enable the Typekit module on the Powerkit settings page. Being an advanced module, it’s disabled by default.
2. Navigate to Appearance → Fonts → Typekit.
3. Input your Typekit token and click Save Changes.
4. Select the kit from the select field, that you would like to use on your website.

What’s next?

If you use one of our premium WordPress themes, you will find the fonts from your kit right in the typography fields in Appearance → Customise → Typography:

This feature also supports live-preview and allows configuring your fonts without refreshing the browser page.

If you’re using a third-party theme, navigate to Appearance → Fonts → Typekit and copy the available CSS classes.

Then you may use them in Appearance → Customise → Additional CSS.

Flash of Unstyled Text

To avoid the so-called Flash of Unstyled Text (or, FOUT), primary elements, like headings and menus will be hidden by default, before the Typekit font is loaded.

You may control how your font looks before the Typekit fonts have been fully loaded by applying your own styles to the .wf-loading class. This class is added by the Typekit module automatically, if the Typekit Token and Kit fields are not empty. It’s removed from the html element, as soon as the Typekit font is loaded.