Using Real Fonts on the Web

In my previous post on using web fonts, I explained how CSS’s @font-face tag enables designers to use a wider range of fonts without resorting to font replacement hacks. In this post, I’ll explain the actual code and some of the services that make it easy to expand your web font repertoire.

In the simple world we can only dream about, use of @font-face looks like this in your stylesheet. First, you name the font-family and point to the file that has the font data:

@font-face { font-family: MyFancyFont; url: (/fonts/myfancyfont.eot) } 

Then, in the rest of your CSS, you can use the font name just like any other:

h1 { font-family: MyFancyFont; font-size: 28px; font-weight: bold; }

This works, as long as the font you want is available in EOT format, and the only browser you care about is Internet Explorer.

Unfortunately, since there is not yet any font format with cross-browser support, you need to supply multiple font files and multiple CSS declarations. (This may seem eerily familiar if you’ve recently looked into HTML5 video.) Each @font-face declaration uses the same font-family name but links to a different source file. For example, FireFox 3.6 and later support the WOFF format, so if you have the font in that format, and you add the following declaration to those above, it will work in that browser as well:

@font-face { font-family: MyFancyFont; url: (/fonts/myfancyfont.woff) }

You can also tie together multiple font files into a family, if the weights are in different font files, by adding the font-weight and font-style declarations to the @font-face rules:

@font-face { font-family: MyFancyFont; url: (/fonts/myfancyfont-regular.woff) font-weight: normal; font-style: normal; } @font-face { font-family: MyFancyFont; url: (/fonts/myfancyfont-bold.woff) font-weight: bold; font-style: normal; } 

You can even define your own weights and styles; whichever ones you define in your @font-face rules you can then use in any other CSS rule.

There are additional complexities with Internet Explorer, oddly enough, as well as other subtleties that make robust @font-face rules far from simple. Fortunately, there are services such as Fontsquirrel (discussed later in this post) that will create all the code for you.

For details, see Paul Irish’s article Bulletproof @font-face syntax.

Note that you can use anything you want for the font-family name. Some designers recommend using names that reflect the usage, rather than the actual font name. You could, for example, name the font-family ‘headline’, and then use it in your headline styles. This allows you to change to a different headline font by changing the @font-face definition for ‘headline’, linking the name to a different font file.

Setting the MIME Type

If you are managing your own server, you’ll also need to make sure the MIME types are set for EOT and WOFF files:

• eot: application/vnd.ms-fontobject
• woff: application/x-woff

If you’re building a site with the Webvanta web CMS, this is taken care of for you.

And Now, for Other Browsers

So far so good, as long as you can find the font you need in the EOT and WOFF formats, it is licensed for web use, and you don’t care about your custom fonts appearing in Safari, Chrome, or the iPad or iPhone.

WebKit development builds support WOFF, so future releases of Chrome and Safari (but not necessarily Mobile Safari) will support that format.

For now, and perhaps for the iPhone and iPad in the longer term, to cover these additional browsers you need to provide the font in SVG format. SVG fonts are supported by Safari 3.1+, Chrome 0.3+ and Opera 10+.

Mobile Safari support for SVG fonts has been weak, with crashes occurring frequently when rendering multiple weights from a font family. If you stick to a single weight, it reportedly works well. The latest version of iOS4, which is available for 3G and later iPhones but not yet for the iPad, reportedly fixes this problem.

Putting It All Together

The good news is that it is now possible, with an assortment of font files in various formats and the right code to load them, to use web fonts in all recent browsers. The bad news is that it can be a pain to create the multiple formats, the CSS code is no longer simple once the various formats and browser idiosyncrasies are taken into account, and licensing remains murky for many fonts.

Into the breach come a handful of online services that eliminate the worst of the pain.

Fontsquirrel Font Packages and Package-Maker

Fontsquirrel has hundreds of font packages you can download that include free fonts, with the CSS to use them. This is a great way to add fonts to your pages with a minimum of effort.

This text is using the Imperator font package, downloaded from Fontsquirrel.

The CSS file provided by Fontsquirrel has an entry like this for each weight and style of the font:

@font-face {font-family: 'ImperatorRegular';src: url('Imperator-webfont.eot');src: local('☺'), url('Imperator-webfont.woff') format('woff'), url('Imperator-webfont.ttf') format('truetype'), url('Imperator-webfont.svg#webfonthmPj8EOl') format('svg');font-weight: normal;font-style: normal;} 

Fontsquirrel also offers a free online font package generator that turns any font that you upload into a complete font package. It converts the font into the assortment of formats required to support all the common browsers, and it also provides the CSS code to set it all up. It is up to you to ensure that your license to the font gives you the rights to use it in this way.

Typekit: a Web Font Service Bureau

Whereas Font Squirrel make it easy to use fonts that are in the public domain or liberally licensed for free, Typekit offers commercial fonts on an annual subscription basis. Typekit serves the files on each request, unlike Font Squirrel, which provides files you must download and install on your server (or upload to the Files area of your Webvanta site).

You can use up to two fonts on a single site for free, with up to 25,000 page views per month. For $25 per year, you get 5 fonts that can be used on 2 sites, with a total of up to 50,000 page views per month. And for $50 per year, you get access to the entire library for use on any number of sites, with up to 500,000 page views per month—a fantastic deal.

This is in Goudy Bookletter, with fonts delivered via Typekit.

Typekit uses JavaScript instead of CSS to add the font definitions to your site. When you create a typekit account, they’ll provide a bit of JavaScript for you that looks like this:

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

The name of the JavaScript file ties it to your account. You don’t need to install any files on your server, because the Typekit servers deliver the fonts directly to your site visitors’ browsers.

The JavaScript code defines a CSS class that you apply to whatever elements you want to have appear in a particular font. The Typekit site provides these class names for each font. You can also define additional class names.

Alternatively, you can use the more traditional approach of specifying the font names in your font-family declarations in any CSS style rule, but you need to include two different font names. This is because part of Typekit’s anti-piracy scheme is to split the fonts into two files.

Font Service a la Carte

Fontdeck and Kernest are web font service bureaus, like Typekit, that provide commercial fonts on an annual fee basis. Unlike Typekit, fonts are priced individually.

To add a Fontdeck or Kernest font to your site, you link in the stylesheet they provide, using code something like:

<link href="http://f.fontdeck.com/s/css/uH5+KWQnXYZZYggGJ9XZLTAgw/www.webvanta.com/1234.css" rel="stylesheet" type="text/css" />

or

<link href='http://kernest.com/fonts/museum-bible.css' media='screen' rel='stylesheet' type='text/css' /> 

Once you’ve included this stylesheet, you can then specify the fonts you’ve purchased by name in your other CSS rules, as with any font:

h1 {font-family: 'Museum Bible'; } 

Just the Beginning

Web fonts are still in a state of rapid evolution, but they are ready for use today with a little care. Licensing issues may keep you from using the exact font you have in mind as a web font, but if you’re flexible you can probably find something similar. Over the next few years, many more fonts are likely to become available. In a decade or two, perhaps there will even be a pervasive font format, and we’ll be able to drastically simplify our font-related CSS code.