January 01, 2002
URL:http://www.drdobbs.com/the-holy-grail-of-font-management/184411765
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.
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 { descriptor; descriptor; ... }
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.
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
font-style
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
font-weight
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
all
, much like the font-weight
descriptor. Again, relative values (wider
, narrower
) are not permitted.
font-size
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
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.
The Last Resort: Downloadable Fonts, Part I
Font Selection
CSS2: Font Size Adjustment
Terms of Service | Privacy Statement | Copyright © 2024 UBM Tech, All rights reserved.