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 !
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.