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: