Downloadable Fonts
The best solution for fonts on the Web is to come up with a cross-platform font that could be downloaded to the browser on the fly. Both of the major browser vendors have developed their own versions of downloadable fonts. Microsoft's solution can be found at www.microsoft.com/typography. Netscape's solution, called Dynamic Fonts, is based on TrueDoc, but this technology was discontinued with version 6.0 of the Netscape browser and should be avoided. A crossplatform solution to the font issue using Flash or another binary format is possible but rather involved. Some have tried to address this issue by performing font substitutions on the server side (www.glyphgate.com), but so far such an approach is not commonplace. The next section briefly discusses the only viable downloadable font technology in use at the time of this edition's writing: Microsoft Embedded fonts.
Microsoft's Dynamic Fonts
Microsoft Internet Explorer for Windows provides a fairly robust way to embed fonts in a Web page. To include a font, you must first build the page using the <font> element or style sheet rules that set fonts. When creating your page, don't worry about whether or not the end user has the font installed; it will be downloaded. Next, use Microsoft's Web Embedding Fonts Tool or a similar facility to analyze the font usage on the page. The program should create an .eot file that contains the embedded fonts. Then, add the font usage information to the page in the form of cascading style sheets (CSS) style rules, as shown here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Microsoft Font Test</title>
<style type="text/css">
<!--
@font-face {
font-family: Ransom;
font-style: normal;
font-weight: normal;
src: url(fonts/ransom.eot);
}
.special {font-family: Ransom; color: green; font-size: 28pt;}
-->
</style>
</head>
<body>
<font face="Ransom" size="6">
Example Ransom Note Font
</font><br>
<span class="special">
This is also in Ransom
</span>
</body>
</html>
<html>
<head>
<title>Microsoft Font Test</title>
<style type="text/css">
<!--
@font-face {
font-family: Ransom;
font-style: normal;
font-weight: normal;
src: url(fonts/ransom.eot);
}
.special {font-family: Ransom; color: green; font-size: 28pt;}
-->
</style>
</head>
<body>
<font face="Ransom" size="6">
Example Ransom Note Font
</font><br>
<span class="special">
This is also in Ransom
</span>
</body>
</html>
Notice how it is possible to use both typical style sheet rules like a class binding as well as the normal <font> tag. A possible rendering of font embedding is shown in Figure D-7.
You must first create a font file and reference it from the file that uses the font. It may be useful to define a font's directory within your Web site to store font files, similar to storing image files for site use.
The use of the @font-face acts as a pseudo-element that allows you to bring any number of fonts into a page. For more information on embedded fonts under Internet Explorer as well as links to font file creation tools like Web Embedding Font Tool (WEFT), see the Microsoft Typography site (http://www.microsoft.com/typography/web/embedding/weft3/).
FIGURE D-7
