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.
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. Select and copy the embed code. We’ll add it to your WordPress theme 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, it’s time to add the embed code to your theme. If you need to find the embed code again, launch your Kit Editor and click the “embed code” link in the top right.
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.
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 >
Once you’ve added the embed code, the fonts should appear on your blog within a few minutes.