It’s no secret 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 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 Monochrome Pro as an example, you’ll see this in the functions file:
View the code on Gist.
You’ll want to remove the following line of code from that function:
View the code on Gist.
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:
View the code on Gist.
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:
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 Monochrome Pro theme uses the Muli font from Google, as shown in the CSS below:
View the code on Gist.
Simply replace the font-family with your Typekit Fonts, as shown below:
View the code on Gist.
Update from Typekit: Serve web fonts without JavaScript (and with CSS)
We have published additional Genesis Quick Tips for you, so feel free to use what you see to build something awesome.
This blog was originally posted on Studiopress.com This post is in no way associated with Kembel.ca. For more posts by this author, please click here.
