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 includedfont-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 thebolder
andlighter
values are not permitted. In addition, the keywordall
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 thefont-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