Contact Us​​ | Status Blog
Help Center
Main Using Typekit on Your Blog › Using Typekit with WordPress.c...

Using Typekit with WordPress.com

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.

If you don't have a Typekit subscription yet, sign up for any of our plans, including the free Trial plan.

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”.

Screenshot of creating the first 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.

Screenshot of the create a kit page

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.

Screenshot of embed code with kit ID

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.

Screenshot of add to kit button

Next, assign selectors to each font. Selectors are used to declare which elements of your blog each font applies to.

Screenshot of kit editor showing selectors

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

Screenshot of kit editor showing publish button

Next, add the kit ID to the Custom Design upgrade on WordPress.com. Find the kit ID again by clicking the “embed code” link in the top right of the Kit Editor.

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.

Screenshot of Custom Fonts advanced mode on the WordPress.com dashboard

Within a few minutes the fonts should appear on your blog.

Still need help? Email Us.

​​​​
support@typekit.com
http://assets04.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete