Contact Us​​ | Status Blog
Help Center
Main Using Typekit on Your Blog › Using Typekit with a self-host...

Using Typekit with a self-hosted WordPress site

This article explains how to use Typekit with a self-hosted WordPress site with the software from WordPress.org. If your site is hosted by WordPress.com, follow these instructions.

Adding fonts to your self-hosted WordPress site is similar to adding fonts to any custom site. This requires basic knowledge of HTML and CSS. You will also need access to your site’s theme files.

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 create a kit page

Next, you’ll be given the embed code for your kit. Select and copy the embed code. We’ll add it to your WordPress theme in a minute.

Screenshot of embed code page showing 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 showing selectors module in the Kit Editor

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

Screenshot of kit editor showing publish button

Next, it’s time to add the embed code to your theme. If you need to find the embed code again, click the “embed code” link in the top right of the Kit Editor.

Screenshot of embed code page showing Kit ID

You’ll need to add the embed code to the <head> of your theme. In most WordPress themes, the <head> is in the header.php file. If you’re using the WordPress Dashboard, you’ll find the header.php file under Appearance > Editor.

Adding Typekit in 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.

Still need help? Email Us.

​​​​
support@typekit.com
http://assets03.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