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,
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. 🙂 Let me know how it goes!
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. 🙂
Is there any way to include Typekit fonts in the functions.php file like Brian has done for Google Fonts rather than the Genesis header box?
https://gist.github.com/bgardner/4381352
http://www.briangardner.com/code/load-google-fonts/
Is there any advantage to putting it into the functions.php?
thanks 🙂
Not that I know of. It’s a javascript, so it loads differently than Google fonts, which has that nifty @import feature.
Here’s what I use to include Typekit using functions.php. Just replace the xxxxxxx with your unique ‘code’ found in the file path in the Typekit tool.
function theme_typekit() {
wp_enqueue_script( ‘theme_typekit’, ‘//use.typekit.net/xxxxxxx.js’);
}
add_action( ‘wp_enqueue_scripts’, ‘theme_typekit’ );
function theme_typekit_inline() {
if ( wp_script_is( ‘theme_typekit’, ‘done’ ) ) { ?>
try{Typekit.load();}catch(e){}
<?php }
}
add_action( 'wp_head', 'theme_typekit_inline' );
thanks Michael — is there any advantage to including this in functions.php rather than the header in the Genesis WordPress admin theme settings panel?
The biggest I can think of is that it doesn’t allow clients to tinker with it as easily. Any other considerations I can think of like speed, performance, security, accessibility, etc…seem negligible to me if any benefit at all. Just personal preference; I spend more time in functions.php and can make changes via my IDE there than going to the theme settings page, so it can also be slightly more convenient depending on your workflow.
I should have also mentioned I like to keep my code as centralized as possible. If I start putting snippets here and there, like in theme or plugin-provided boxes, I can quickly lose track of what’s where when it needs to be updated. Keeping my code all together assures me I know where it is quickly, and it’s not off in a lonely corner somewhere hiding in the shadows.
Thanks for this helpful article Carrie! How about Dynamik Web Builder? Should TK automatically override all the font selections in the DWB GUI? Or is there some extra things that need to be done? I have TK embedded just the way you’ve shown here, and it seems to be working in in some areas, but not in others.
Shoot me a link? And an example or two of where things are working and where they’re not?
p.s. Firebug is my trouble-shooting tool. 🙂
I figure it out. Upon re-reading your article I realized I had missed the part about “A few simple CSS edits…” whereas I had initially thought that simply using the “Selectors” setting in the Typekit editor would be enough. In any case, adding the font stack to Dynamik’s “Universal Font Control” custom CSS fields did the trick. Thanks again for this article!
Thanks for your response! Well I wasn’t actually expecting you to troubleshoot my site 🙂 but here it is: http://carmelpm.wpengine.com. All the Sans Serif fonts should be Myriad Pro. I should also add that I did not add any CSS to my site. I just assigned the html (h2-6,p,a) tags in the type Kit Kit editor but now I’m beginning to wonder if that is not really the correct way to go. I love firebug too but I am far from an advanced user. All I use it for at the moment is figuring out what CSS classes and IDs to target.
How about adding two sets of fonts? is this mean that you have to put 2 sets of javascript too on the header and footer scripts?
Nope – as long as both fonts are added to a “kit” in your Typekit account, the same script will bring in both.
Hi Carrie,
I am trying to use Museo slab font. I’ve added the javascript embed code. I wanted to use this font for post/ article titles. In style sheet what what would be the font family name ? or How to apply this font for only for post titles ?
Hey Christopher, if you go to Typekit and look at the “kit” you created for your website, there will be examples of how to refer to the font family in your CSS.
If you wanted to use that font for all your headers, you could do something like:
h1,h2,h3,h4,h5,h6 { font-family: fontname; }To target your post title specifically, you’ll want to look and see what CSS class is used there. Ever used Firebug (or Chrome Inspector)? It can be your new best friend! Here’s a tut: https://carriedils.com/firebug-demo-troubleshoot-css/