Use Typekit fonts on your blog

Typekit can be used on any blogging platform that allows you to customize your HTML. Armed with basic knowledge of HTML and CSS, you can add fonts to your blog in a few minutes.

If you don't have a Typekit subscription yet, sign up for any of our plans.

Once you’ve created your account, choose some fonts! When you find a font you like, click the font card to go to the family page.

Browsing web fonts on

On the font family page, click the "Web use: add to kit" button, then choose “create a new kit."

The "web use: add to kit" button on the font family page.

A kit lets you configure the fonts that Typekit will apply to your website. Give the kit a name, and enter the domain for your blog.

Create a kit: choose a name and list the website(s)

Next, you’ll be given the embed code for your kit. Select and copy the embed code. That embed code includes a seven-character alphanumeric code; this is your kit ID. Just copy the two lines of code provided into the <head> of your blog.

If you use TypePad, copy the kit ID and paste it into your TypePad settings under Add-ons > Typekit Fonts. Be sure to save your changes. 

Instructions for using the JavaScript embed code


If you are using a kit in an exisiting Typekit account, you can find the embed code by clicking the "embed code" link in the upper right of the kit editor.

To add more fonts to your kit, click the “Web use: add to kit” button and choose the kit name from the “add to an existing kit” menu.

Click Use Fonts to add another web font to the kit

Next, assign selectors to each font. Selectors are used to declare which elements of your blog each font applies to. (Here's where you'll need to know some basic HTML and CSS.)

Assigning CSS selectors in the kit editor

Once you’ve added the selectors you want, click "publish."

Click the Publish button to publish the kit

Once you’ve added the embed code, the fonts should appear on your blog within a few minutes.

Using Typekit with a self-hosted WordPress site

Adding fonts to your self-hosted WordPress site is similar to adding fonts to any custom site.

After following the steps above to create and publish a kit, you’ll need to add the embed code to the <head> of your theme. In most WordPress themes, the <head> tag is in the header.php file. If you’re using the WordPress Dashboard, you’ll find the header.php file under Appearance > Editor. If you need to find the embed code again, click the “embed code” link in the upper right of the kit editor.

Adding Typekit from the WordPress Dashboard

Once you’ve added the embed code, make sure to save your changes.

If you’re editing your theme files in a code editor, you can find it under wordpress > wp-content > themes > your-theme-folder > header.php.

Adding Typekit to a WordPress theme file

Once you’ve added the embed code, the fonts should appear on your blog within a few minutes.

Remove Typekit from your blog

To remove Typekit from your blog, simply remove the Typekit embed code from the <head> of your site’s markup. Once you’ve removed the JavaScript embed code, your blog will apply the fallback fonts specified in the CSS file or the browser's default fonts.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy