The Holy Grail of Font Management

As we've drilled deeper and deeper into the world of CSS2 font features, we have finally reached pay dirt, the Holy Grail of font management in CSS2, the @font-face rule. This rule is the magic link that lets you manage downloadable fonts in your HTML documents.

The Basics

As we've seen in the past few weeks, CSS2 has new features that let you reference and use fonts in your HTML documents. Many of these features allow the browser to alter locally available fonts to better meet your needs. When all else fails, however, authors can turn to the @font-face rule to instruct the browser to retrieve the font from some other location and use it in the current document.

The basic syntax of the rule is easy:

     @font-face {
        <i>descriptor</i>;
        <i>descriptor</i>;
        ...
        }

Each descriptor looks like a conventional CSS2 property, with a descriptor name followed by a colon and an appropriate value.

Perhaps the most important descriptor is src. The value of this descriptor is the URL of the font data. Without this descriptor, the browser cannot retrieve the font.

Along with the URL of the font, you'll need to provide at least the name of the font, using the font-family descriptor. The value of this descriptor is a string containing the name of the font.

With these two properties, you can create the minimal @font-face rule:

     @font-face {
        font-family : "Malfoy"
        src : url("http://fonts-r-us.com/fonts/malfoy.ttf")
        }

If you referenced the font Malfoy in your document, and the browser could not find a local copy of Malfoy on your machine, it would download a copy from the indicated URL and use it in this document only. The font would not be permanently installed on your machine and would be used in other documents unless they also included a similar @font-face rule.

Font Selection Descriptors

Clearly, just a name and a URL is not enough to specify every last font you might need to use in your documents. CSS2 provides a number of additional descriptors that let you exactly describe the font to be downloaded and how it may be further synthesized by the browser. The descriptors fall into two groups: font selection descriptors, which we'll cover this week, and font characterization descriptors, which will wait until next week.

The font selection descriptors correspond, for the most part, to the various font properties used to select fonts in your CSS2 style sheets. By including these descriptors in your @font-face rule, you make it easier for the browser to decide if it needs to download the font. The font selection descriptors are:

font-family

As we've seen, this descriptor requires a string value that provides the name of the font.

font-style

This descriptor accepts the same values as the CSS2 font-style property, but also allows more than one of those values to be specified, separated by commas. When multiple values are provided, the downloaded font is presumed to contain rendering data for all of the versions specified. Thus, if you included font-style : normal, italic in your @font-face rule, the downloaded font should contain both the normal and the italic versions of the font.

font-variant

This descriptor accepts the same values as its CSS2 counterpart, along with allowing multiple values separated by commas. Again, specifying multiple values implies that the downloaded font represents all those versions.

font-weight

This descriptor accepts one or more of all of the corresponding font-weight property values, except that the bolder and lighter values are not permitted. In addition, the keyword all can be used to indicate that the downloaded font contains all weights for the font.

font-stretch

This descriptor accepted a list of one or more of the corresponding property's values, along with the keyword all, much like the font-weight descriptor. Again, relative values (wider, narrower) are not permitted.

font-size

This descriptor accepts a list of values indicating the sizes of the font available in the downloaded version, along with the keyword all. Some scalable fonts can be made any size, all is appropriate for most fonts that are not bitmapped representations of specific font sizes.

unicode-range

This descriptor has no corresponding CSS2 property. It is used to indicate which characters are actually represented in the font, using the Unicode values for those characters. The value of this descriptor is a comma-separated list of Unicode values and ranges. The idea behind this descriptor is that the browser will not download a font if it does not contain the glyphs for the needed characters. Unless you specify otherwise using this descriptor, a font is assumed to contain the full range of glyphs.

Using these descriptors, you can tell the browser exactly what it is getting when you define a downloadable font. If you define an external font as:

     @font-face {
        font-family : "Malfoy";
        font-style : normal;
        font-weight : bold;
        src : url("http://fonts-r-us.com/fonts/malfoy.ttf")
        }

and later request the italic version of Malfoy, the browser will not download this font, since it cannot meet its needs.

Downloadable fonts can be used to synthesize other fonts. Next week, we'll look at the descriptors that help the browser know when and if it can alter a downloadable font to meet your needs.

Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition, HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and Web-related topics for a number of online magazines.

Previously in Tag of the Week

The Last Resort: Downloadable Fonts, Part I
Font Selection
CSS2: Font Size Adjustment