This article explains how to use Typekit with a website that is hosted by WordPress.com. If you are self-hosting a WordPress site with the software from WordPress.org, follow these instructions.
There are two options that allow you to quickly and easily add Typekit fonts to your WordPress.com blog:
Both tools show a preview of your blog as you select different fonts, and can be used with any WordPress theme. No coding is required!
Refer to the WordPress.com help pages for more information, or watch our screencast on using the Custom Design mode:
Custom Design upgrade in advanced mode
It is no longer possible to add Typekit embed code to a WordPress.com site. This option is only available to legacy users who subscribed to the Advanced Custom Design option prior to November 2013.
First, you will need to create an account on Typekit.com. You can choose from any of our plans, including our Free Plan; all paid plans are free for the first thirty days, so you can try Typekit out risk-free.
Once you’ve created your account, choose some fonts! When you find a font you want to use, click “Use Fonts” on the font card or on the font detail page. Select the Web tab in the window that opens, and then “create a new kit”.
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.
Next, you’ll be given the embed code for your kit. You don’t have to add the embed code to the site yourself; WordPress.com includes it for you. All you need is the seven-character alphanumeric code; this is your kit ID. We’ll show you how to add the kit ID to WordPress in a minute.
You can add more fonts to your kit at any time by clicking “Use Fonts”, selecting the Web tab, and choosing the kit name from the “add to existing kit” menu.
Next, launch your Kit Editor to assign selectors to each font. Selectors are used to declare which elements of your blog each font applies to.
Once you’ve added the selectors you want, click "publish."
Next, add the kit ID to the Custom Design upgrade on WordPress.com. Find the kit ID again by launching your Kit Editor, and clicking the “embed code” link in the top right.
Copy and paste the kit ID into the advanced mode screen of the Custom Fonts upgrade on your WordPress.com blog, then click “save.” Your kit is now installed on your blog.
Within a few minutes the fonts should appear on your blog.