With CSS1, we could specify the font to be used within a page, but that font would need to be installed on a user's system in order to work. CSS2 introduces a standard mechanism for actually embedding a font into the page, which means we can now use almost any font we want. The browser downloads the font information much like it downloads an image and then displays the font.
(Note: Font embedding isn't that new. IE 4.x supports it, and Communicator 4.x supports it using different, non-CSS code. But at least now the coding for it has finally been standardized through CSS.)
@font-face {
font-family: Mulder;
src: url(fonts/MULDER.eot);
}
H3 { font-family: Mulder, Times, serif; }
This code (appearing alongside other CSS rules) defines a font called Mulder (not a real font, by the way). Then it points to a file (MULDER.eot) so the browser can download the font information. The next CSS rule tells the browser to use the Mulder font for all <H3> text. If the Mulder font can't be downloaded or displayed, or if an older browser is being used, then the browser will use Times instead.
This sentence is an example of the Mulder font being used.
The CSS2 specification includes the following formats: TrueType, OpenType, and PostScript Type 1. So how do you create an embedded font? By using a tool to convert any of the aforementioned font formats into the following formats:
- Embedded OpenType (.eot) — works in IE 4 or higher
- TrueDoc (.pfr) — works in Communicator 4 or higher (also works in IE if the user
is willing to install a separate ActiveX control)
Because we're talking about IE, we'll focus on Embedded OpenType. To convert a font into an .eot file, which can then be embedded in a Web page, go get Microsoft's WEFT (Web embedding fonts tool). Only TrueType or OpenType fonts that have been approved for embedding by their designers can be converted at this time.
When you embed a font in a Web page, the font doesn't actually get installed on your user's system; it's just used temporarily by the Web browser. In addition, when you use WEFT, you specify exactly which pages get the embedded font. This way, others can't take your font for their own use.
Beyond the familiar font family and the embedded fonts we just talked about, the CSS2 spec also covers other wondrous ways of specifying fonts. For example, you can supply just the properties of a font, and the browser finds the font on the user's machine that most closely matches those properties. (Properties include things like weight, x-height, horizontal stem width, vertical stroke angle, and even the Panose-1 number.) Or you can supply these properties, and the browser will actually create a font based on them.
Yes, this sounds pretty amazing, but as you might suspect, these techniques aren't supported. Yet.
next page»
