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 several Custom Design options for WordPress.com that allow you to quickly and easily add Typekit fonts to your blog: the Custom Design upgrade and the Theme Customizer.
- The Theme Customizer and the Custom Design standard mode each provide a visual preview of your blog with Typekit fonts and allow you to edit the size and style of your fonts easily. No coding is required, and you can use it with any theme.
The Custom Design advanced mode is ideal for users who want to edit their own CSS, either in the Typekit Kit Editor or in the WordPress CSS Editor.
Theme Customizer
The Theme Customizer offers a new way to add Typekit fonts to your WordPress-hosted blog without any code editing required. Read more from WordPress about how to use the Customizer.
Custom Design upgrade in standard mode
The standard mode is another way to add Typekit fonts to your blog and preview how they will look before committing. No coding is required. Read more from WordPress about how to do this, or watch the screencast below.
Custom Design upgrade in advanced mode
If you prefer to write your own CSS or want more control over the typography on your site, you can use the Custom Design upgrade in advanced mode. In this mode, you'll use CSS selectors to specify where the fonts will be added to your blog; the fonts you choose aren't added to the Font Editor menus.
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! Browse the library and, when you find a font you want to use, click “Create a 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 the “add to kit” button.
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.