Creating Dynamic Fonts with HexWeb

By Bob Schmitt
November 7, 1997

It's insanely easy to add dynamic fonts to your Web site using HexWeb Typograph, and here's where we show you how.

Concept

The basic concept behind TrueDoc dynamic fonts is to create a .pfr (Portable Font Resource) file — using your existing outline (TrueType or PostScript) font library — which contains a record of the characters of the fonts used in your Web pages.

The act of recording this information is commonly referred to as "burning" a .pfr file. This font information is read from the .pfr file at the time the page is displayed and "played" back by the browser, rendering the font on the page. TrueDoc will only work in a browser that has a built-in CSP (Character Shape Player) — currently Netscape 4.01 and later.

Once you've burned your .pfr file you can spec the fonts in your Web pages as you would any other font face, either by using the <FONT FACE> tag or Cascading Style Sheet's {font-family}.

Preparation

To get started, you'll need to download and install HexWeb from HexMac's Web site. Don't let their name fool you, they've got Windows versions as well. Demo versions of HexWeb come in a variety of flavors, stand-alone versions for Mac and Win95, or plug-in versions which work with BBEdit for Mac, and Front Page for Windows. They're all very similar in look, and identical in functionality, so take your pick as to which one you'd like to use.

Application

When you first open HexWeb, you'll see an untitled document and the floating Tools palette (on Mac, if the Tools palette is not open, select HexWeb Typograph from the Tools menu). The document window serves as a rudimentary HTML editor — you can either create your HTML in this window or open a pre-existing HTML document by selecting Open from the File menu. The HexWeb document window is really nothing more than a simple text editor; you may find it easier to use your favorite HTML editor to create your document, and use HexWeb solely to burn your .pfr files, as I'll discuss below.

Figure 1: HexWeb's Mac (top) and Windows (bottom) Tools palettes.

As you can see in Figure 1, the tools palette of the Mac and Windows versions varies slightly in layout, but they each have identical functionality. Let's go through each of the buttons and their functions.

The Buttons

The Direct Burning button
This button, I found, is the most handy of the four. It allows you to directly burn a .pfr file with the fonts of your choice. This is very useful if you want to create a .pfr file quickly and don't need any help with HTML coding. Clicking the button brings up the dialog box seen in Figure 2.

Figure 2: The Direct Burning dialog box.

On the left side is a list of outline fonts installed in your system. Move the fonts you want to burn to the right-side box by double-clicking the font or selecting it and clicking Move.

Once you've selected the fonts you want to burn into the .pfr file, you can choose a subset of each font to burn. This eliminates characters in the font you may not be using in your Web page, and results in a smaller .pfr file. For example, if you're using only a few characters of a dingbat font, you can eliminate all but the characters you are using from the .pfr file.

Figure 3: The Subset dialog box. Selected characters
have a red checkmark next to them.

The Alternative Fonts button
This button lets you define alternative fonts for each and every font in your library. Alternative fonts will be listed sequentially in the FONT FACE tag, so people viewing your Web pages without a CSP-equipped browser — and without your first choice font installed on their computer — will get one of the alternative fonts (usually one of the basics like Arial or Helvetica).

For example, (Figure 4) I've selected Times and Georgia as alternative fonts for Caslon Regular. This way Mac users will get Times, and Windows users will get Georgia in place of Caslon if they aren't able to view dynamic fonts.

These alternative fonts are used with the Insert button, which we'll look at next.

Figure 4: The Alternative Fonts dialog box.

The Insert button
This button works in conjunction with the pop-up menus to the left of the buttons (see Figure 1) to automatically build a FONT tag. You can set the font face, the font size (in either relative sizes, such as +1 and -1, or as an absolute point size), and the font color. Once you've selected all your parameters and defined your alternative fonts, create the FONT tag by selecting the text you want to tag in the document window and click the Insert button. The FONT tag will automatically be added to the HTML document (Figure 5).

Figure 5: The FONT tag as it appears in the document window.

The PFR Burning button
Once you've added your FONT tags to your HTML file, you can use this button to automatically create a .pfr file with all the fonts used in the file. Clicking the button brings up the dialog box seen in Figure 6.

Figure 6: The PFR Burning dialog box.

In the first field enter the Domain that your .pfr files will be served from. This is an important security feature built into TrueDoc. The .pfr files burned with this domain name can only be used with HTML files that reside on this domain. This prevents others from taking your .pfr files from your server and using them on their server. It also prevents others from pointing at your .pfr files from another server.

In the next field you can enter a default path to your .pfr files. Use this only if you keep all your .pfr files in the same directory on your server. This default path will be used in the LINK tag, which I'll discuss in a moment.

While the PFR Burning dialog doesn't offer you the control over subsets that the Direct Burn option does, you still have three choices:

Include all the characters in a font,
Include just the lower 128 characters (direct keyboard characters — no alternative characters like bullets, curly quotes, em dashes, etc.),
Or include just the actual characters contained in the document.

This last option will produce the smallest .pfr file, but if you edit the HTML at a later time, you may have to update the .pfr file if you add characters to your document that weren't there when you burned it.

Click OK and a .pfr file is created in the same folder as your HTML document. If you have the Insert LINK tag... checkbox selected, the LINK tag is added to the HEAD of your HTML document (see Figure 5). This tag tells the browser where to find the .pfr file on your server.

After you have your HTML documents and .pfr files complete, upload them to your server and you're ready to go.

Pitfalls

Here are a couple gottchas to be aware of when creating documents with dynamic fonts:

Configuring the server
As with any new file type on the Web, your server needs to be made aware of the type of file. This is done by setting a MIME type. Your system administrator can do this by adding the type application/font-tdpfr with the extension pfr to the Web server. More information is available on Bitstream's Web site.

Using exact server names
When creating .pfr files you have to specify an exact domain name on which the .pfr file will work (see Figure 6). Unfortunately, the .pfr file reader isn't intuitive enough to recognize a partial domain. For example, if you specify "www.webreview.com" as your domain when burning a .pfr file, a user that goes to "webreview.com" will not see your dynamic fonts. You will need to create a .pfr file for each instance of your domain. Additionally, if you have a development server that is different than your delivery server, you'll need to create separate .pfr files for development and delivery.

Incorrect LINK source
Make sure you place your .pfr file on your server in the place specified in the SRC attribute of the LINK tag. This may seem very obvious, but I do know people who have made this mistake.

So there you have it: dynamic fonts in a nutshell — now get out there and create some dynamic stuff.