Downloading Fonts Automatically - HTML

When you write HTML, you’re probably well aware that when you set up an img element in a Web document, the image downloads into the client machine’s cache, enabling the browser to display the image. This process needs to take place if the image is to be viewed. An embedded font file works the same way. An embedded font file is a font object that you create and embed into the page using a font creation tool such as Microsoft’s WEFT, which creates embedded fonts optimized for IE5, or HexMac by HexMac, which creates embedded fonts optimized for Netscape (but downloadable to IE5 with the use of an ActiveX Control).

Dynamic font standards and options
Basically, there are two font-embedding platforms: OpenType and TrueDoc. The two font platforms differ in some ways, the most obvious being that since they both use different file types, you have to jump through some hoops to develop any kind of font compatibility across browser platforms.

The two formats also differ in how they appear on the screen. TrueDoc looks more like an image file, whereas OpenType looks more like a typeface.

OpenType is a font distribution standard developed by Microsoft and Adobe Systems, the purpose of which is to establish a means of providing some semblance of typography to the Web using the same kind of principles involved in font metrics that can be found in such type formats as PostScript and TrueType. Font metrics describe the metrics, or measurement, of a type character’s shape using an em square as the basis. The em square, as mentioned earlier, is the grid upon which a font exists and from which its width and height are calculated.

The technology is centered around the creation of a font object file, with an .eot extension, which is generated by a font creation tool either designed specifically for that purpose, or as an engine residing in a broader-based Web authoring program. One such tool, WEFT, is both a standalone application and a shared component that can be licensed from its developer, Microsoft, by application developers who are building Web-authoring software. The standalone program is free and can be found at Currently, only Internet Explorer (versions 4 and higher) supports OpenType.

BitStream, a typeface manufacturer, makes the competing standard TrueDoc. Netscape 4.0 and higher are the only browsers that directly support TrueDoc, although BitStream makes an ActiveX control that can be used in IE5.

Licensing issues
The reason font embedding has not spread more quickly across Web deployment lies not so much in the reluctance of Web authors to embrace the technology (although that’s part of it), nor in the technology itself; but rather, licensing issues have slowed the pace of development, because font vendors are reluctant to invest in the development of a font only to see it distributed on Web sites without compensation.

Should you use font embedding or style sheets?
Many developers, in noticing the various squabbles in the realm of font embedding, have simply barricaded themselves from the entire affair by avoiding both platforms completely. As difficult as it might be to develop compatible pages using the two font platforms, however, you can’t do any damage using them, because they rely on style sheets and font elements to do their work. And when they fail, they fail gracefully. The question of deployment then becomes a question of resources, and whether or not your organization has enough of them to utilize embedded fonts as part of the production process.

How to add downloadable fonts to a Web page
The two methods of font embedding have some similarities, in that both require a tool to create the font objects that get embedded into the Web page. The obvious tool of choice for IE5 developers would be WEFT, or any other tool that generates OpenType font files. Similarly, there are tools for TrueDoc font files that create font objects with a .pfr extension, which is the file extension for TrueDoc files.

When you are developing OpenType files for IE5, you use an at-rule style sheet to establish their links:

@font-face { font-family: Garamond; font-style: normal; font-weight: 700; src:

TrueDoc files are used with the link tag and the fontdef attribute:

If you’re developing for Netscape Navigator, all you need is the link element’s src attribute. If you’re developing pages for IE5, you’ll need to include the ActiveX Control. The ActiveX control is embedded in your page with a JavaScript file located on the TrueDoc site:


Put the preceding code in the head element of your HTML.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics