Font Embedding | Dynamic HTML in Action

The FONT element and the CSS font-family attribute allow you to specify a font to display, but they can specify only fonts the user already has. There is no guarantee that a person viewing the Web page has the desired font installed. Font embedding through the @font-face attribute lets you specify any font available to the designer and can practically guarantee that the user will have the font. This is accomplished by temporarily installing the specified font on the user's computer. The W3C formally included @font-face in the CSS level-2 specification.

Unfortunately, no version of Netscape Navigator currently supports the @font-face attribute. Netscape Navigator does, however, support a font embedding protocol from Bitstream known as TrueDoc. Bitstream has also released a downloadable Microsoft ActiveX control that adds TrueDoc support to Internet Explorer versions 4 and later. However, TrueDoc is not part of any W3C endorsed CSS specification and will not be covered in this text. Detailed information about TrueDoc can be found at www.truedoc.com.

How Font Embedding Works

Creating Web pages with embedded fonts is easy. The first step to creating the Web page is specifying fonts that you would like to use. (They must be available on your machine.) Code Listing 12-3 produces a simple Web page that specifies three fonts, without using embedded font technology. Figure 12-3 shows how Internet Explorer displays this code.

Code Listing 12-3.

 <HTML> <HEAD> <TITLE>Listing 12-3</TITLE> <STYLE>   .crl {font-family: "Curlz MT"}   .viv {font-family: "Vivaldi"}   .stp {font-family: Stop}   DIV  {font-size: 30pt} </STYLE> </HEAD> <BODY> <DIV CLASS="crl">This is some text using Curlz MT</DIV> <DIV CLASS="viv">This is some text using Vivaldi</DIV> <DIV CLASS="stp">This is some text using Stop</DIV> </BODY> </HTML>

click to view at full size.

Figure 12-5. This Web page specifies three fonts that are not available on the target machine.

If the users viewing this Web page do not have the specified fonts on their computers (which is likely since they are uncommon), the page will not be displayed properly. The screen in Figure 12-5 is from a computer that did not have any of the specified fonts installed. Notice that all the text is in the standard browser font. This is not how we want the page to look.

To create downloadable font files and embed them within the page so that it looks the way we intend, we use a tool called WEFT, which stands for Web Embedding Font Tool. This tool is available on the companion CD in the \tools\msweft.exe file or from www.microsoft.com/typography . WEFT will analyze a Web page, determine what fonts it uses, create embedded versions of those fonts, and then, if desired, modify the original Web page so that it calls those fonts. Code Listing 12-4 shows what the code for the page looks like after WEFT completes its work. Figure 12-6 shows the resulting page. (The title of the page is still Listing 12-3 because the tool did not modify that line.)

NOTE
WEFT embeds the locations of files that are allowed to use a font, as well as the location of the font, in the embedded font itself. For security reasons, the font file will work only with files in the specified path. Because the use of the font file is limited, the risk of someone stealing the font for other uses is minimized. In Code Listing 12-4, the allowed path is D:\chap12\. If you try this example on the companion CD, your CD-ROM drive must be the D: drive. If you plan to use an EOT file on a Web server, you must point WEFT to a location on your Web server when it generates the fonts. This ensures that the path generated will point to your Web server and that the fonts will function there. You might need to copy the created fonts to your Web server. If you are generating them on your own machine for experimentation, use the file:// protocol; for example, file://D:\chap12\CURLZMT0.eot. These issues might become clearer if you look at the actual WEFT tool.

Code Listing 12-4.

 <HTML> <HEAD> <TITLE>Listing 12-3</TITLE> <STYLE>   .crl {font-family: "Curlz MT"}   .viv {font-family: "Vivaldi Italic"}   .stp {font-family: Stop}   DIV  {font-size: 30pt} </STYLE> <STYLE TYPE="text/css"> <!--   @font-face {     font-family: Curlz MT;     font-style:  normal;     font-weight: normal;     src: url(file://D:\chap12\CURLZMT0.eot);   }   @font-face {     font-family: Vivaldi;     font-style:  normal;     font-weight: normal;     src: url(file://D:\chap12\VIVALDI0.eot);   }   @font-face {     font-family: Stop;     font-style:  normal;     font-weight: normal;     src: url(file://D:\chap12\STOP0.eot);   } --> </STYLE> </HEAD> <BODY> <DIV CLASS="crl">This is some text using Curlz MT</DIV> <DIV CLASS="viv">This is some text using Vivaldi Italic</DIV> <DIV CLASS="stp">This is some text using Stop</DIV> </BODY> </HTML>

click to view at full size.

Figure 12-6. Embedded fonts display the text as intended.

The fonts that are created for download have an EOT file extension. So that the Web page finds the fonts properly, ensure that the EOT files created by WEFT are in the folder specified in the HTML file.

The modified page contains not only the font references we originally included in the file but also a series of @font-face style rules that tell the browser where to look for the font files. You can also add these @font-face rules by hand, though WEFT is necessary to create the embeddable fonts. Note that version 1 of WEFT sometimes has problems with fonts that have multiple word names.

Font Availability

Some font companies restrict the use of fonts to the purchaser. For this reason, you must not assume that any font that happens to be on your computer can be distributed with your Web page. TrueType fonts are encoded with embedding permissions that establish how conversion tools such as WEFT are allowed to use the fonts. The four levels of permission are shown in Table 12-1.

NOTE
Microsoft maintains a dedicated Web site containing information on Web typography issues. To see what Microsoft is doing in the area of Web-based typography, visit www.microsoft.com/typography. As of this writing, a beta version of WEFT version 2 was available from this Web site.

Permission Level	Description
No embedding	The font creators do not allow their font to be embedded. (Often, however, the font creators might offer an alternate embeddable version.)
Print and preview	These fonts can be embedded only in pages that are static to the user. In other words, the page that uses the font cannot be "editable" by the user (as a page in a Web-based e-mail editor would be, for example).
Editable	These fonts can be embedded and do not carry the restrictions of the print and preview fonts.
Installable	These fonts are treated as editable by Internet Explorer, so they can be used as any normal font would be. Though they carry an Installable permission level, Internet Explorer does not install these fonts in the user's font folder. Because users could come across hundreds of these fonts throughout the Web, this restriction helps avoid cluttering users' computers with unwanted fonts.

In WEFT, you can easily determine the permission level of all the fonts on your computer by choosing Available Fonts from the View menu. WEFT will check all the fonts on your system and display a report like the one shown here, which tells you whether the font is okay to embed, is a Windows core font, is encoded as no embedding, is broken, or whether the font status is unknown: