One of the things that drew me to evaluating and purchasing the Thesis theme for WordPress was the outstanding typography that seemed to be a part of every Thesis site I looked at.
The settings for fonts are simple to use — you choose a single typeface for each option — but behind the scenes, Thesis builds a complete “font stack,” that is, a comprehensive collection of fonts to use, sorted in order of preference. This ensures that your text will look good, no matter what fonts are installed on a viewer’s computer.
For example, when you choose Georgia for your main font, behind the scenes Thesis specifies a series of fonts that are similar to Georgia:
font-family: Georgia, 'Times New Roman', Times, serif;
The variety of typefaces offered by Thesis is somewhat limited, due to the nature of fonts on the web today; there’s only a dozen or so that are “safe” to use, because everyone has them. But recently a few services have come along, which take advantage of new features in modern web browsers to offer more variety in type. Possibly the most “mature” of these (with mature being a relative term) is Typekit. But how do you use Typekit with Thesis, when Thesis only allows you to choose fonts from a pre-defined list?
It turns out that this is quite easy to accomplish. In a nutshell, you treat Typekit as a second custom.css file. There are three simple steps:
- On Typekit, create your “kit” for your web site. Use the same CSS selectors here that you would use in your
custom.cssfile if you were specifying them there:
You can uncheck any font weights that you’re not planning to use, and you can leave the default CSS Stack setting. Be sure to click the (big ass?) Publish button!
When you’ve got your kit specified, copy the embedding code from Typekit:
Click the Embed Code link at the top right of the page to see this.
Switch back to your site, and paste the Typekit JavaScript into Thesis, in the Header Scripts section of the Thesis Options panel:
At this point, you should be able to reload your site, and see the new font(s) in action, wherever you have set them to be used. If you want have additional control over the use of your Typekit fonts, such as bold, italic, text spacing (tracking), etc., you can add it to your custom.css file as normal. This is all straightforward CSS. Typekit is only specifying the font family; all other font settings are handled by Thesis (automatically) or your custom.css file.
There is one aspect of customizing your CSS font specifications that might not be obvious: when a typeface comes with a more broad range of weights, say, from light to ultra bold, how do you specify which weight to use? The answer is very simple, just add a font-weight CSS attribute with a numeric value from this list:
font-weight: 200; /* Thin */
font-weight: 300; /* Light */
font-weight: 400; /* Normal */
font-weight: 500; /* Medium / Semi-Bold */
font-weight: 600; /* (not used) */
font-weight: 700; /* Bold */
font-weight: 800; /* Black */
font-weight: 900; /* Heavy */
So, if you want to use the Milibus typeface for your navigation menu, but the default weight of normal seems a little light to you, while bold is just too bold, to use the semi-bold face just add this to your custom.css:
/* Make the weight of the nav menu a little stronger for Milibus */
.custom ul.menu li.tab a {
font-weight: 500; /* semi-bold */
}
Again, do not specify the font-family in your custom.css file for elements that will use fonts from Typekit. Typekit handles the font-family for you; you do everything else in custom.css.
I hope this inspires you to get (more) creative with type on your web site!
I’m having some trouble understand exactly how this picks up. There are so many options for the thesis fonts I don’t even know which one to choose. Any ideas how to correlate these?
If you’re not a designer, or feeling overwhelmed, I would recommend sticking with the options available in Thesis itself. The typography options there are very good (if conservative), and it’s virtually impossible to end up with something that looks bad.
Moving beyond the built in options, you’re in the realm of design and taste. Browse the TypeKit font collection, and find something that looks good to you. If you have a local (not production) version of your site, it’s easy to test out a bunch of options, so just set aside an hour or two (or all day, TypeKit has hundreds of fonts!), and experiment until you find something that speaks to you.
Thanks a bundle for this, you’re the only page on the web that covers this, so we’re lucky that you went in to this much detail. Trying out a bunch of new fonts now and trying to find the prettiest and most readable 2 out there, but I have a question. I can’t find out how to set links to be in one font but h1 links to be in another, is this possible? Everything I’ve tried so far has overwritten it.
@Josh: I’m far from a CSS guru, so I can only suggest the obvious:
h1 { font-family: Georgia; } h1 a { font-family: Georgia; } a { font-family: Helvetica; }If you’ve already tried that (and on a Thesis site, remember to add .custom in front of each specifier), then I recommend asking in a CSS-specific forum, where the real experts hang out.
Ah, can’t believe I overlooked that, h1 a was the one that made teaser links show up in the new font. Thanks so much, you saved me from having to sign up on a CSS forum and hitting f5 every 10 seconds until I found this out.
Thanks!!! I learned in 20 seconds what I’d been piecing together all too slowly for the last 45 minutes. That deserves some appreciation.
So I’m pretty confused as to why my fonts are not being displayed…
The code is in the header
The font family is being changed (check the sidebar h3/h2’s) but its defaulting to the unsupported setting (san serif).
Any clue as to why typekit is not interfacing with my site?
Nice simple tutorial, it makes adding customized web fonts a snap. How do you normally check whether the web fonts you applied has taken effect?
@Felix: Uh, the way I check to see if the fonts are in effect is to re-load the page on which they should display. I’m afraid I don’t know of anything more clever than that! And, I’m sure what you’re really asking is, is there an easy way to test the effects of new fonts, across a wide range of web browsers. There are some services that can accelerate this, but I don’t use them. I just load up a bunch of browsers, in Mac OS X and in Windows, and check the pages out…
Hello-
I am trying like crazy to get Typekit to work within Thesis. I have done the steps, but I feel like maybe my problem is I have the wrong selectors? I can’t get any typekit fonts to work.
I mostly want to change the font in my Nav Menu, but I’d like to implement Typekit fonts on the whole site.
Any suggestions?
I’m trying to figure out how to use Typekit with Thesis 1.8.1
It seems like you wrote this tutorial for an earlier version of Thesis, because there are no longer sections for “Header Scripts” and “Footer Scripts”.
How would I install thesis now that it is no longer easy to manipulate these scripts?
@George: Actually, the script fields are still there, and adding extra JavaScripts to a Thesis site remains just as easy. But, the names have changed, to better reflect the purpose of the scripts, rather than their position. They are still on the Site Options page, but Header Scripts → Additional Scripts, and Footer Scripts → Stat and Tracking Scripts.
Personally, I dunno that “Additional Scripts” is much better than “Header Scripts”, but I suppose the old grouping and naming implied that both script sections were only intended for stats/tracking, which was never really the case. Anyway, HTH!
“At this point, you should be able to reload your site, and see the new font(s) in action, wherever you have set them to be used.”
How does one “set them to be used”?
This is the only part I am having trouble with.