Setting up Fonts using Typekit

With the emergence of web font service bureaus and the widespread browser support for CSS's @font-face tag, you no longer need to limited your web designs to the tiny set of fonts considered "web safe" by virtue of being present on most computers.

We've selected Typekit as the web font supplier that we've bundled into most of our SmartThemes. Typekit offers a wide selection of fonts at low cost, with a high-performance, easy-to-implement solution.

For more information on how web fonts work, and the range of suppliers, see our webfonts resources list. There are several web font service bureaus, so if Typekit doesn't have the fonts you want, you can easily use another supplier.

Using the Included Typekit Account

We have chosen two fonts for each of our SmartThemes, one for headlines and one for body text. You are in no way constrained to these fonts, but you need to do a little setup work to change them.

The included Webvanta Typekit account allows you to use these pairs of fonts without having your own Typekit account. You will need your own Typekit account if you want to use different fonts, however.

You will also need your own account to use any Typekit fonts at a domain other than something.webvanta.com. Each Typekit "kit" is tied to a particular list of domain names. We provide you, at no cost, with a kit that works with any Webvanta subdomain. When you take your site live at its own domain name, you will need to switch to your own Typekit account for the fonts to work.

Set up your own Typekit account to choose different fonts and to use your own domain name. (We discuss this in detail later in this article.)

Our Standard Typekit Fonts

Setting up your site to use web fonts requires first selecting the fonts you want to use at the Typekit site. To get you started quickly, we have set up a few font combinations that you can use without any setup.

All of our SmartThemes except the Minimalist and Blank themes include the Typekit setup. We have chosen different fonts for different themes, primarily to illustrate the variety that is available.

The fonts are loaded by two lines of JavaScript, which must be included in the head section of your page templates. We have placed it in the Javascript snippet, which is included in the head section of each template.

The Typekit JavaScript looks like this:

<script type="text/javascript" src="http://use.Typekit.com/rvo8dyv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

The first line loads the Typekit JavaScript file, while the second line executes it.

The seven-character name of the JavaScript file, rvo8dyv in the example above, identifies a particular "kit" — a set of fonts in a particular account. This is called the Typekit Kit ID. To change to your own Typekit account, so you can choose your own fonts and use a domain name of your own, you only need to set up your account and change the Typekit Kit ID. (Note: in the code that we've included in our SmartThemes, the Kit ID is pulled from a Global Setting, rather than being inserted directly in the JavaScript, so you don't need to modify the JavaScript code — just update the value in the setting.)

You'll find a setting called "typekit_id" under Settings > Global Settings. All you need to do to change to a different kit (either one of the others in the included account, or one of your own) is to change the value in this setting. Then make sure you are referencing the corresponding font names in your CSS rules.

Note there is no @font-face declaration in your CSS file when you are using Typekit fonts. Instead, the JavaScript adds the fonts to your CSS, and it is the configuration of your Typekit account (or our account, if you are using our standard setup) that determines which fonts get loaded.

You can use any of these font selections on any Webvanta site by specifying the corresponding Typekit ID:

Using the Fonts in Your Stylesheets

The Typekit fonts are applied to your styles almost like any other font name. The only difference is that you need to specify two font names, one ending in -1 and the other in -2, because Typekit splits the font files into two pieces as part of its font protection scheme. (Some sort of protection scheme is necessary for font suppliers to allow their fonts to be used online.)

Here, for example, are the CSS declarations in which the fonts are specified in our "Classic" theme:

body {
  font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","arial",sans-serif;
}
h1, h2, h3, h4, h5 {
  font-family:  "adelle-1","adelle-2","arial",sans-serif;
}

This code specifies FF Tisa Web Pro for body text, and Adelle for headlines. If the Typekit font is not available (which would happen if you did not include the required JavaScript, or used it on a domain name that was not authorized for your Kit, or if the viewer is using an old browser that does not support @font-face), then Arial will be used. If even that fails, the system-generic sans-serif font is used.

Here's the font names for the fonts in each our standard font kits:

Setting Up Your Own Typekit Account

If you want to choose different fonts, optimize the size of the fonts you are loading, or use your own domain, you will need to set up your own Typekit account.

Typekit offers a free account, but it provides only a limited set of fonts and requires that you include a Typekit badge on your site.

For most sites, we recommend the Personal or Portfolio plans at $24.99 or $49.99 per year. This is a modest cost for access to all these fonts.

Set up your own Typekit account to choose different fonts and to use your own domain name. (We discuss this in detail later in this article.)

Once you have created your account, you need to:

• Choose the fonts you want to use in your Kit.
• Choose which weights you want to include.
• Specify the domain names that will use this Kit.
• Replace the value of the typekit_id Global Setting with your Typekit Kit ID.
• Use the appropriate font names, in pairs, in your CSS.

Optimizing Performance

One cost of using custom fonts is that the font file must be downloaded as part of the page. It is cached by the browser, of course, but the time to load the first page from your site can be substantially higher when using custom fonts.

If you set up your own Typekit account and configure your own Kit, you can choose which weights are included. Many fonts include half a dozen weights, and just trimming it down to the basic regular and bold will dramatically reduce the download size.

If users on slow connections are important for your site, you may want to limit your use of fonts to just headlines, and load only one weight.

Browser Support

Browser support for @font-face, as delivered by Typekit, is quite wide. It includes:

• Internet Explorer 6 and later
• Firefox 3.5 and later
• Safari 3.1 and later
• Chrome 4 and later
• Opera 10.54 and later
• Android 2.2 and later

This is a rare case where support goes back to IE6 but requires newer versions of Firefox and Safari. Fortunately, users of those browsers are much more likely to upgrade, so old versions of those browsers are much less of an issue.

You should be aware that font rendering quality varies based on the operating system, browser, and font, so you'll want to test out your choices in various versions of Windows as well as on the Mac. (Often, Firefox 3.x on Windows XP is a worst-case combination.)

iPhone and iPad Support

As of this writing, support for the iPhone and iPad is considered "experimental." Unless you search out and change a setting, the fonts will not work on these devices. But it is easy to enable.

In the Kit Editor, click on Kit Settings, and then click the Experimental Features tab. Check the boxes for iPhone and iPad support.

Note: this become moot on December 6, 2010. After that date, iOS (i.e., iPhone and iPad) support will be enabled by default. Typekit will support iOS 4.2, but not earlier versions, because of a crashing bug in earlier versions of Safari when multiple font weights were used.

For performance reasons, you may prefer to not use custom fonts for iPhone users who are likely to be using a cellular data connection, in which case you would, of course, not check the iPhone box.