Using Embedded Fonts in Web Pages 

One of the drawbacks of the World Wide Web as a medium for document publishing is that the client's browser and operating system play a large part in determining how a given document will be displayed. This has been especially true with regard to fonts, since the only way to display information in a font that was not installed on the user's machine was to create an image of the font and display the image. This approach is far from ideal, as it results in longer development and more difficult maintenance of pages, larger and slower loading pages, and text which is unsearchable because it is stored as an image.

In order to solve this problem, two products have been developed which allow the web publisher to include all of their font information with their web page such that any user who lacks the font can automatically download and install it on their machine. This process is known as embedding fonts, and the two products are Microsoft WEFT and Bitstream WebFont Wizard. I will compare both products, and demonstrate how both can be used together to create a site that can be viewed from either Internet Explorer or Netscape, without losing any of its custom fonts.

Embedded Fonts

For those of you not familiar with embedded fonts, let me explain. I am not talking about simply controlling the display of the ‘Arial’ or ‘Times New Roman’ font on your web page, which can be done easily enough with HTML and CSS or XSL. This article goes a step further and describes a method by which you can display any font on your web page without having to go to the trouble of making a GIF image for every piece of text that you want in a custom font. With the right tools, you can even create your own font sets and display them on your site, or just buy your fonts from any of a number of foundries on the web.

Using embedded fonts instead of images offers many advantages, such as reduced page size, more easily indexed pages, and easier maintenance because the style and content of the text can be controlled with CSS and HTML, rather than requiring a new image to be created every time a change is needed. With these benefits in mind, let's cover the tools needed to embed fonts in your web pages.

WEFT

Microsoft has a utility called the Web Embedded Fonts Tool (WEFT), which allows you to analyze your web pages (or whole sites) to determine the fonts they are using. It then packages and deploys those fonts to support the page/site. It is still basically in beta mode, and is only supported by recent browsers (IE 4.0 or higher, Navigator 4.08).

Where to Get It

WEFT can be downloaded freely from Microsoft's website, which also includes documentation for the tool. You can download it from http://www.microsoft.com/typography/.

How to Use It

This is not the most intuitive tool in the world to use, but after a few hours of playing with it, you will get the hang of it. When you first run the tool (and every time you start it, for that matter), it automatically assumes that you really want to analyze an entire website's font usage. It will ask you for the URL of the base file, and whether or not you would like to traverse its links to analyze the entire site. WEFT supports several protocols, including http, ftp, https, and local files. I was unable to get it to work on local files directly from this menu, but you may be more fortunate. Once you have selected your file, it will analyze the page(s), which can take some time. Microsoft recommends that you only analyze pages using fonts that you already have installed on your machine. I had mixed success with this part of the tool - on at least one occasion the application stopped responding and I had to kill it manually after letting it sit for a few hours.

Once you are past this stage, you can select the fonts you are interested in embedding (see Figure 1). This portion of the wizard lets you add any font installed on your machine to the page(s). The Subsetting section allows you to select how much of the font to include - some font sets are quite large and to save space you may wish to include only the basic letters and numbers if that is all your page uses. Using this feature you can create font subsets on a per page or per site basis. Note that some fonts require you to embed multiple sets in order to get bold , underlined, italic, or other special displays of the characters (see Figure 2). Also, many non-Microsoft fonts, which have not been "fixed" for use with WEFT, will be displayed as "Needs Repair" and cannot be embedded. Microsoft claims that they will offer a tool to automatically repair such fonts, but as yet, the tool remains vaporware and the button in WEFT that would call the tool ("Details") responds "Could not find application!"

Figure 1: Fonts to Embed Menu. Notice the Futura font cannot be embedded.

Figure 2: Pressing the "Add" button displays a listing of all available fonts.

Assuming you find one or more embeddable fonts on your system that you would like to embed in the page(s), you then proceed to the next page, which lets you create the font objects. This form (Figure 3) lets you designate where to create the new font files, designate a root directory (URL) within which the fonts should be available (i.e. everything within your website). An "Advanced" button lets you provide an alternative method of retrieving your pages if they include server-side scripting so that the wizard does not damage the page. Finally, there is a handy checkbox that lets you see the CSS code, which is generated by the wizard, which you can then cut-and-paste into your web pages. This is very handy, and I find myself now just skipping the whole wizard and creating and embedding the font objects using just the "Fonts to Embed" and "Create Font Objects" functions from within the Tools menu, but we'll cover that momentarily. Clicking "Create Fonts" finishes this form. WEFT embeddable fonts are created as *.eot files.

Figure 3: You're almost done - check the "Show CSS…" block and press "Create Fonts".

The last page in the wizard, "Publish Web Pages", allows you to copy the local versions of the files to their source with the new font information. Again, if your pages use any server-side script, you are given the option of specifying an alternative method. My preference is not to let wizards touch my code, since I don't trust them, and to just cut-and-paste the CSS code in by hand.

Once you have created the EOT files, the code used to reference the files in your web page is very simple. WEFT creates the following code for you:

<STYLE TYPE="text/css">
<!-- $WEFT - Created by: Steve () on 12/21/00 -
  @font-face {
    font-family: Forte;
    font-style: normal;
    font-weight: normal;
    src: FORTE0.eot;
}
-->
</STYLE>

Assuming the "src" attribute is correct, the only code left to add is <FONT FACE="Forte"> or a CSS style with a font-face attribute of "Forte".

Bitstream WebFont Wizard

Bitstream offers their WebFont Wizard that functions very similarly to WEFT. However, I found Bitstream's tool to be a bit simpler and more intuitive than WEFT.

Where to Get It

You can download an evaluation copy of the WebFont Wizard from http://www.bitstream.com/webfont/index.html. This allows you to create 10 font objects or use the tool for 10 days, whichever comes first. The full version costs $198.95 and includes Bitstream's Font Navigator (a font management tool) as well.

How to Use It

Bitstream's WebFont Wizard is very simple to use, and well documented in their 11 page PDF Quick Start Guide, which is installed with the evaluation copy. To get started, just run the application from the Start menu. The evaluation copy will remind you how many days and fonts you have left, then asks you to select a font (Figure 4). Note that, as with WEFT, many fonts are separated into different files for different styles.

Figure 4: Choose a font.

After choosing a font, you are prompted to decide how many characters from the font you want to encode. Your choices include standard printed characters, the complete set, or a custom character set of your choosing (Figure 5).

Figure 5: Choose character set.

Finally, choose the URL path(s) that will be able to use this font (Figure 6). Files that are outside the specified paths will not be able to use the fonts.

Figure 6: Select URL path(s).

All that remains is to provide the path and filename for the new font, which you should save as a .PFR file (Figure 7).

Figure 7: Create the embeddable font file.

Along with the .PFR file, the wizard also creates a *.pfr_ReadMe.html file like the one listed below. This file is a very nice feature of the WebFont Wizard, because it demonstrates exactly how you need to configure your HTML pages to use the font you have just created. The ReadMe file is just over a page long - a small section of it is listed here (Figure 8). Figure 8 describes the code you need to add to your page to take advantage of the embedded font. As you can see, it is really very simple, and the source of the ReadMe.html file has all the code you need.

Figure 8: WebFont Wizard creates a readme file with every new font.

Any questions or problems you run into which aren't covered by this brief synopsis of the product are probably described in Bitstream's Quickstart Guide.

Comparison

I chose to compare the two products using five simple categories: Ease of Use, Features, Stability, Compatibility, and Cost. The table below describes how I rated the two products, followed by explanations of the ratings.

Category	Microsoft WEFT	Bitstream WebFont Wizard
Ease of Use	2	5
Features	4	3
Stability	2	5
Compatibility	3	4
Cost	5	3
Total	16	20

Ease of Use

I found Bitstream's WebFont Wizard incredibly easy to use. Its demo software walks you through a few simple steps to create your font package file and works right out of the box. A detailed PDF is included with the install to answer any questions you may have, and every font created has its own FontName_README.html file created with it, which describes and demonstrates how to include the font in a web page.

Microsoft's WEFT was less intuitive to use, and although there is ample documentation on their website, I found WEFT less user-friendly than Bitstream's product. Furthermore, WEFT had a tendency to crash, or take an inordinate amount of time while processing. It took me several hours of use to discover how to simply create a new font package without first selecting and analyzing a web page or site (the answer is embarrassingly simple, but not documented anywhere - simply cancel out of their wizard that starts every time you run WEFT and select "Fonts to Embed" from the Tools menu).

Features

Microsoft's WEFT product has a number of features that help it to stand out from its competitor. It will analyze font usage for entire websites, and it can connect to sites locally or remotely using several different protocols. It also displays information about fonts such as whether or not they are core windows fonts, allowing you to choose to embed only those fonts that you think your users will not have already installed on their machine. Further, it will actually modify HTML pages and copy them back to their source, if you want it to do so. These features can be quite useful, but the sheer simplicity of Bitstream's demo product appealed to me, and their full version includes their Font Navigator, which I have not used and so cannot comment on its features (but I'm sure it has some). On the whole, WEFT won out, but the instability of some of its features kept me from giving it a higher rating.

Stability

As noted, I only tested Bitstream's demo product, but it performed like a champ without a single crash or weird error message. Microsoft, true to form, did not do so well. The WEFT tool is very touchy, and will crash if you do anything it doesn't expect. If you try to repair a font that it considers "broken", it will fail (see below). If you try to open an existing project on your hard drive, it will often crash. If you give it a relatively large web page to analyze, it may simply stop responding (I know, it says it may take a while, but I had a single web page with no links go for hours without a response from WEFT). In short, WEFT is still very much a free Microsoft Beta product, with all that that entails.

Compatibility

Every font I tried with Bitstream's product worked on the first try. I had difficulty installing several custom fonts using WEFT, which said the fonts needed repair. This was true even after I contacted my vendor to get updated fonts that they claimed had been "fixed" for WEFT usage. I tested the WEFT fonts on both IE 5.x and Navigator 4.08 on Windows 98 and both displayed the fonts correctly (to my surprise - Netscape did not support WEFT until very recently). I conducted the same test using Bitstream's product, and once again both browsers displayed the fonts correctly, although Internet Explorer had to download the ActiveX component first. One disadvantage of using the WebFont Wizard is that users who refuse to download the component will be prompted to do so on every page they visit which has embedded fonts (assuming they have default security settings). This would quickly get annoying, either forcing the user to abandon the site or to give in and download the component. This is the only thing that kept the WebFont Wizard from receiving the maximum score for compatibility.

The test page I used to test the products is included in this article's support material that you can download at the bottom of this page.

Cost

Microsoft's WEFT is free, and it doesn't get any better than that from a cost perspective. Bitstream offers a 10-day/10-font trial of their WebFont Wizard, which is what I used to make this comparison and offers enough features to get you started with embedding fonts in your web pages. However, their full product costs $198.95, which includes 200 fonts and a Font Navigator for managing your fonts. This is pretty pricey for the typical developer, but not unreasonable, I thought. If all you really need is to embed your own fonts, they will sell just the WebFont Wizard alone for about $50, but you have to call them directly.

Conclusion

If you're in need of something other than Times New Roman or Arial font on your web page, then embedded fonts should definitely interest you. This technology offers many benefits over the traditional method of creating each needed phrase as a small GIF file and adding it to the page as an image. There are two tools available today that provide a means for embedding the fonts of your choice into your HTML documents. Both tools will be understood by the latest versions of both Internet Explorer and Netscape Navigator, and browsers that don't understand the embedded fonts will degrade gracefully and simply show the text in their default font. Certainly, embedded fonts offer web designers a great deal of flexibility.