I’ve installed the free version of TypeKit on misangela.com just to play with it. You get two fonts with the free account. I think I’ll put it on here, too, just for fun.
The way it works is you put a couple of lines of script in the header of your WP theme (and do some CSS wrangling) and it calls for the fonts from the TypeKit servers. Pretty slick, IMO.
The configuring of the kit is easy, but TypeKit is not that great with instructions – as are most techy sites/apps/whatever. Sorry, boys, but propellerheads write the worst instructions on the planet.
So, allow me to write a step by step of how to install TypeKit with your WP blog. I use the Atahualpa theme most of the time because I love how quick you can set it up. And you can tweak 95% of everything from within the dashboard without having to rewrite CSS, etc. YES it outputs some NASTY looking code, but I’ve never had issues with its speed or problems with the inline code. I leave it inline because I’m lazy, but you can tell it to link to the CSS if you wish. Whatever, I digress.
To use TypeKit with WP, first you must set up the TypeKit account and choose your fonts for the “kit” it serves to you. So, go do that. I’ll wait… ::insert Jeopardy theme here::
Now that you’ve got your account, and chosen your fonts, you need to get them working with your site. What they say on TypeKit’s site is to copy the two lines of javascript code and paste into the header of your theme. So, go ahead and do that. You’ll notice that your site still has the same fonts as before. This is because they are a bit vague about the fact that you have to change your theme CSS as well. Boo! This is easy-peasy with Atahualpa, but a bit more challenging with other themes. The bottom line is that you must call the fonts from your CSS, so this could be a big job or a small job depending on the theme and your customisation thereof.
For Atahualpa, you simply go into the main Body/Text & Links area and put your chosen font in place of tahoma or verdana or whatnot. I suggest a sans serif font for your main font since it’s the web and serifs can be hard to read on a monitor. But use what you want. I also configured the post titles (with a nice serif) and the blockquotes, too. The point is that you must insert the font names in the appropriate places in order for them to work.
Another caveat is that TypeKit does not explicitly tell you what the fonts are called on the server. Trick, trick! SO, go back into your “kit” (via “Launch Kit Editor” on the typekit site) and take a look at the top left. There is a window to add Selectors. When you select a font, it will show you the actual name of the font right under that window. Thisis the name you should use in your CSS. For instance, Angie STD Sans is actually Angie-Sans. See:
Where to find the actual CSS name of your fonts.
Despite the feeling that you should be putting something in that Selectors window, I didn’t and my site is working fine. I think you can put your CSS in there if you want all of that served from their servers or if you have very specific CSS for your type. It wasn’t explained very clearly and since I didn’t need it, I didn’t pursue the explanation. The free version only has two typefaces, so I chose a serif and a sans and made them default.
Your site should reflect the fonts you’ve chosen once you get the right font names into your CSS. It’s not nearly as automatic as it sounded or as I’d hoped, but it’s still pretty darn cool. I even love the little badge it puts at the bottom of your site. I adore colophons!
I hope if you came here via google that you found this tutorial helpful. Feel free to leave a comment.