Add Typekit Fonts to Your Website

It’s no secret that I’m a fan of Google Fonts, but I’m also an huge advocate of Typekit Fonts as well. I love the variety of fonts that Google offers, and that they are free to use, but once in a while I want to take my website to a higher level.

If you’re wondering how to add Typekit Fonts into your Genesis website, I’ve got good news for you. It’s quite simple, and I’m going to show you below.

Adding Typekit Fonts

If you are using any of our StudioPress themes, you’ll need to remove the code that loads Google Fonts first. There’s no reason to keep it in, especially since it would add an additional http request on your site load.

Using Remobile Pro theme as an example, you’ll see this in the functions file:

You’ll want to remove the following line of code from that function:

The next step in adding Typekit Fonts to your Genesis website is to create a “kit” through your Typekit account. After you have done that, you should be provided with an Embed Code that looks something like this:

You’ll need to copy that code and place it into the Header Scripts option box on the Genesis > Theme Settings page in your WordPress dashboard.

Here’s an screenshot that shows you where to place the code:

Typekit Fonts Embed Code
Place your Typekit Fonts embed code in the Header Scripts box.

The last thing you need to do is update the CSS in your style sheet. You’ll want to do a search and replace, as this will ensure you replace all instances.

For example, you’ll notice that our Remobile Pro theme uses the Neuton font from Google, as shown in the CSS below:

Simply replace the font-family with your Typekit Fonts, as shown below:

I hope that you enjoyed this Genesis tutorial. I have also published a list of Genesis code snippets, so feel free to use anything you see there.

Got something to say? Hit me up on Twitter and let’s talk about it.