Getting Typekit up and running on your Genesis Framework site is a piece of cake! This post will get you going in four easy steps. There’s even a FREE 5th Bonus Step included below (for the overachievers).
Steps to Install Typekit on a Genesis Framework site:
- For starters, you’ll need to a Typekit account. Once you’re logged in, click Launch Kit Editor in the upper right toolbar.
- Once your Kit Editor window is launched, there’s a little link to Embed Code and you’re gonna want to click it. Oh, you’re GONNA WANT TO !
- Next up, you’ll want to copy that bit of javascript to your clipboard. Just hold on to it for a sec!
4. Now you’re ready to head over to your WordPress Admin Dashboard. Go to Genesis > Theme Settings. Scroll down until you get to the Header and Footer Scripts section. Then paste that bit of javascript to output in wp_head(), like this:
BOOM! Now your Typekit scripts will be loaded into the head of every page on your site. That’s really all there is to it! From here all you’ll need to do is add the appropriate CSS to your site where you want your Typekit fonts to appear.
FREE 5th Bonus Step: Getting Rid of a Bad Case of FOUT
FOUT stands for Flash of Unstyled Text. It’s that unsightly phenomenon of a browser showing a default font and then “flashing” over to your styled font once the scripts are fully loaded. Trust me, it’s ugly and can make your design elements shift around during a page load.
Unless you’re using Firefox, you may not have even realized you had FOUT, much less that you needed to control it. Head over to the Typekit blog and read some posts on controlling FOUT. A few simple CSS edits and you’ll be good to go.
Special Shout Out
Thanks to Brian Gardner for his thoughtful writeup on using Typekit fonts vs Google fonts. There’s a lively discussion in the comments thread that’s worth the read.
Also, many thanks to Chris Ford from Creativity Included for putting a name to the FOUT phenomenon and providing a link to the Typekit blog post outlining the solution.
Great post Carrie! I run Typekit on and will have to go back and make sure I’ve installed it properly.
My problem is that I also have Premise installed and it does not carry over the Typekit fonts to my landing pages. Any suggestions?
Hey Vince,
Let me know how it goes!
Glad it was helpful. For Premise, try going to Premise > Main Settings and then scroll down to Header Scripts (toward the bottom). You’ll need to insert those Typekit javascripts in that space as well. I learned a similar lesson the hard way when installing Google Analytics on Premise.
Carrie
Good advice Carrie. i have fallen in love with Genesis over the past few months and with minimalist themes with impact. Brian Gardiner’s advice coupled with your posts have been very helpful.
Hi, James. Thanks for stopping by James! Glad you’ve found the posts helpful.