by Jerry Honeycutt
W3C's Web fonts working draft extends the existing CSS1 style sheet mechanism to support the @font-face at-rule, which allows you to embed fonts into the Web page. The benefit is obvious: You can package the fonts you use in your Web page with the HTML document. At this writing, Web fonts are not part of the HTML 4.0 proposal, but Web fonts might become part of it by the time the proposal becomes a recommendation. You can see W3C's working draft for Web fonts at http://www.w3.org/Style/Group/WD-font-970710.
Microsoft and Netscape use different terminology for Web fonts. Microsoft calls them embedded fonts. Netscape calls them dynamic fonts. In either case, the mechanisms are roughly similar, but the font formats (OpenType for Microsoft and TrueDoc for Netscape) and utilities to build font files are different. You learn about both in this chapter.
Forget about Web fonts for a moment and consider the problem that HTML authors have always had: You build a dynamite Web page that depends on a fanciful font to make a certain impression. You use either a style sheet or the <FONT> tag to specify the font face by name. Then the user opens your Web page, but the browser can't find a matching font. The browser tries many alternative fonts and chooses one that doesn't quite meet your expectations. As a result, the user sees something that looks like Figure 21.1, when you intended the user to see a Web page similar to Figure 21.2.
FIG. 21.1
This problem is particularly nasty if you're using the symbols from a font, as demonstrated
here.
FIG. 21.2
As intended by the author, the symbols show up when the font is available.
Web fonts eliminate this problem. They allow you to build a Web page that appears to the user exactly as you intended. Instead of hoping and praying that the user's browser can find a matching font, you can package the font with your Web page so that you're certain it will be available.
You embed a font into a Web page via a font description. A font description links a style sheet's font reference to the font data, whether it is on the server or local machine. You use the @font-face at-rule, which is an extension to CSS1 style sheets (see Chapter 17, "Applying Cascading Style Sheets"), to create font descriptions. It takes the form of any other rule:
@font-face { property: value; property; value }
In the @font-face at-rule, you provide the name of the font using the font-family property. The browser looks up font descriptions for each particular style rule using this property.
You reference the location of the font using the src property to which you can assign an URL in the form of URL(URL). For example, URL(./fonts/mine) specifies the location of a font file called mine in a folder called fonts. URL can be a relative or absolute path. The src property also provides a means to specify the format of the font data: TrueDoc or OpenType, for example. You append format(font-format) to the value you assign to src, like this:
src: URL(./fonts/mine) format(opentype)
In the following example, the @font-face at-rule downloads the font called Old World from the relative URL fonts/oldworld. Any time the P style is applied to the Web page, the browser searches all the font descriptions to find the font data for the Old World font.
<STYLE TYPE="text/css">
@font-face { font-family: "Old World"; src: url(fonts/oldworld) }
P { font-family: "Old World" }
</STYLE
You can also assign an adorned font name to src. An adorned font name is the name of the font as a user sees it on a menu or font selection dialog box. This indicates that you're referencing a font that exists on the user's computer as opposed to downloading the font from the server. To use an adorned font name, you assign a value that looks like local(name) to src, where name is the name of a font such as Gloucester MT Extra Condensed.
Because you can assign more than one value to src, you can assign an adorned font name to it, followed by a downloadable font. This forces the browser to look for a particular font on the user's computer, and if it can't find the font, it downloads the font from the server. In the following example, the browser tries to find Old World Light on the user's computer; failing that, it downloads fonts/oldworld from the server:
<STYLE TYPE="text/css">
@font-face
{
font-family: "Old World";
src: local(Old World Light), url(fonts/oldworld);
}
</STYLE
The @font-face at-rule supports several properties that you use to describe the font's characteristics. You can provide multiple font descriptions for a single font family. When the browser applies a style that references that font family, it finds the font description whose properties match the style. Here's a brief description of each property and the values you can assign to it (the first value for each property is the default):
| Property | Possible Values | Description |
| font-family | Family name | Describes the family name of the font. |
| font-style | normal, italic, oblique | oblique indicates a slanted face, and italic indicates a cursive face. |
| font-variant | normal, small-caps | small-caps indicates a small-caps variant of the face. |
| font-weight | all, normal, bold, 100, 200, 300, 400, 500, 600, 700, 800 | This descriptor indicates the weight of the face relative to other faces in the same family. |
| font-size | all, length | This descriptor indicates the sizes provided in the font file. |
The @font-face properties are the same that you use in normal style rules; the difference is that with @font-face, you can assign multiple values to each property using a comma- delimited list of values. Here's how Web fonts match styles to font descriptions:
Given the example in Listing 21.1, a style rule that sets font-family to Texas and font-weight to 200, 300, or 400 will match the first font description, which refers to the font stored in ./fonts/texas-bold. A style rule that uses the Texas font family and formats the text as italic will use the second font description, however, which refers to the font stored in ./fonts/texas-italic.
<STYLE TYPE="text/css">
@font-face
{
src: URL(./fonts/texas-bold) format(OpenType);
font-family: Texas;
font-weight: 200, 300, 400;
}
@font-face
{
src: URL(./fonts/texas-italic) format(OpenType);
font-family: Texas;
font-weight: normal;
font-style: italic, oblique;
}
</STYLE>
TIP: You can use the <STYLE> tag's MEDIA property to limit an embedded font to a particular output media such as the screen or printer. See Chapter 17, "Applying Cascading Style Sheets," for more information.
The user's Web browser won't render the HTML until it's downloaded all the embedded fonts. If the font you're embedding is quite large, the user must wait several moments before he or she sees the content of your Web page. This is in contrast to the more immediate gratification that a user gets now as the browser displays the Web page's text quickly.
You can force the browser to display the Web page's contents before downloading the font, however. You do that by embedding the font in an external style sheet. You link to that style sheet after the browser opens the Web page by using a script to assign the URL of the style sheet to the stylesheets collection. Assuming that you've stored a style sheet with an embedded font in a file called mystyle.css, the script in Listing 21.2 causes the browser to download that font only after it's finished loading the Web page.
<SCRIPT TYPE="text/vbscript">
Sub Window_OnLoad
document.stylesheets(0).href = "mystyle.css';
End Sub
</SCRIPT>
In the third line of the listing, the URL of the style sheet is assigned to document.stylesheets(0).href. This assumes that there is at least one style sheet in the Web page and that it's being overwritten. You'd replace that index with an appropriate index if you were using multiple style sheets. Alternatively, you can dimension a new style sheet object and assign the URL of your style sheet file to it. This requires you to add the following HTML at the top of your document:
<LINK REL="stylesheet" HREF="null">
Microsoft's provides a tool called WEFT (Web Embedding Fonts Tool) that you use to embed fonts in your Web page. You can download WEFT for free from http://www.microsoft.com/typography/web/embedding/weft/default.htm.
WEFT analyzes each page in your site, noting how you use fonts in each. It then builds compressed font objects that it automatically links to each Web page.
Microsoft provides a number of free fonts that you can embed in your Web page. Open http://www.microsoft.com/typography/web/fonts/default.htm, and you can pick from any of the following:
You can get into serious trouble if you embed a copyrighted font in your Web page without permission. You can check a font to see if you're free to distribute it using Microsoft's Font Properties Extension. Download this utility from http://www.microsoft.com/typography/property/property.htm and follow the instructions you see on the screen to install it.
After you install the Font Properties Extension, right-click a font file (look in C:\Windows\Fonts), choose Properties, and you see the dialog box shown in Figure 21.3. The Embedding tab tells you what you can and cannot do with the font. For example, you might see a message that says Installable embedding allowed. You also see the font's copyright on the Names tab.
FIG. 21.3
The Font Properties Extension adds several new tabs to the existing Font Properties
dialog box.
To create and embed TrueDoc fonts into your Web page, you must have author tools. At the time of this writing, these tools were not yet available, but Table 21.1 points you to the vendors that have promised to add TrueDoc support to their authoring tools.
| Vendor | URL |
| Astrobyte | http://www.astrobyte.com |
| Bare Bones Software | http://www.barebones.com |
| Boomerang Software | http://www.mosaiccom.com |
| Corel Corporation | http://www.corel.com |
| Digiflyer | http://www.digiflyer.com |
| FutureTense | http://www.futuretense.com |
| HexMac | http://www.hexmac.com |
| InfoAccess, Inc. | http://www.infoaccess.com |
| Macromedia, Inc. | http://www.macromedia.com |
| MySoftware Company | http://www.mysoftware.com |
| Network Computer, Inc. | http://www.nc.com |
| RMX Technologies, Inc. | http://www.rmx.com/world |
| Sausage Software Ltd. | http://www.sausage.com |
| SoftQuad | http://www.softquad.com |
| TextCenter AB | http://www.textcenter.se |
| TLCO Software | http://www.tlco.com |
© Copyright, Macmillan Computer Publishing. All rights reserved.