Vol. 1, No. 21
Embedding Fonts

Fonts on the Web have come a long way from the days when header-size tags were all we had. Evolution has brought about the rise of italicized and bolded characters, font-face and font-family tags, and a variety of ways to manipulate font size. Of course, that's not nearly enough to make dyed-in-the-wool designers happy. When you've invested thousands of dollars in a font library that distinguishes seven varieties of Bodoni, it's hard to settle for anything less than the ultimate. Let's face it — you know your site is meant to feature Akzidenz Grotesk — how can you stand it when users' puny hard drives render your text in plain ol' Helvetica?

Site builders have traditionally circumvented browser-font limitations by throwing all of their site's text into GIFs. This has the advantage of displaying the text exactly the same way for every reader, but also carries with it the disadvantages of slowing the site's download time, making modifications a chore, and running the risk of broken images. Snazzy server-side technologies like PHP allow the creation of text GIFs on the fly, but for most large-scale purposes this is a hassle well worth avoiding. Thanks to one of the more obscure features of the fourth-generation browsers, there is a possible way out.

Netscape Navigator 4 and Internet Explorer 4 and 5 permit the embedding of fonts: You can code custom font information into your page so that those browsers display the page with your specified fonts — regardless of how limited your visitor's machines may be. Naturally, the two browsers handle embedded fonts completely differently, but it's fairly simple to make a page that will work on both platforms — and with a file size much smaller than an equivalent page made using GIFs. Here's how it works.

Embedding Fonts for Netscape

Netscape's font embedding is done via BitStream dynamic fonts. Embedded fonts are encoded as a Portable Font Resource (PFR) file, which, among other things, provides copy protection by permitting the embedded font to be used only on those pages you specify. Any unauthorized use of your font will be blocked. Embed the font on your page just once, and then use it as much as you like, just as you would any regular font.

You first need to download and install a font-embedding tool: HexWeb. A free, downloadable trial version is available, but it doesn't allow you to encode numbers and certain symbols. If you want to use numbers, you'll have to purchase the full version for $99.

Once you launch Typograph, start by clicking the "Direct Burn" button (in the lower left, next to "Color"). You can burn (that's the term they use ... don't ask us why) multiple fonts into a single PFR file — or just one font, or even a few measly characters. It's your choice. A dialog box will appear; enter the URL where you'll be using the fonts (for security reasons) and denote which font(s) you wish to burn. Click "Burn," and you'll be asked where to save the PFR file. Choose a destination folder and, quick as a wink, the PFR file will be created.

Now all you need to do is upload the PFR file to your site directory and call it from the relevant page(s). To embed the font in your page, you'll need to write a few lines of code. Typograph is happy to add them for you, but we'll show you how to do it for yourself, so you can understand how it works. In the "head" section of your page, you'll need a "LINK" tag that specifies the directory and name of the PFR file, like so:

<LINK REL="fontdir" HXBURNED SRC="first.pfr">

This code calls up the PFR file (i.e., the font) whenever the page is loaded in Netscape. Then, to use the font, you'll just use a "FONT FACE" tag as normal. Be careful: The name of the font has to be exactly right. This is why it can be helpful to let Typograph paste in the code for you with its "Insert" button. It's a good idea to provide alternative font choices for older browsers that don't support embedded fonts:

<FONT FACE="Dungeon, Arial, Helvetica" SIZE="3" COLOR="#336633">

You can also use a special <FONT POINT-SIZE=""> tag for extra precision, which will be ignored by browsers other than Netscape 4.

Embedding Fonts for Explorer

The procedure for Internet Explorer is similar. The program that you'll use is Microsoft's Web Embedding Fonts Tool (WEFT). There's a new beta version available, but let's stick with old tried-and-true version for now. After installation, you may notice that WEFT does things a little backward: You first need to create and upload the page on which you want to use embedded fonts, with tags or CSS declaring each font use. You then run WEFT's wizard (from the "Tools" menu) and point it at your site. You'll need to have a hard-drive copy of each font you want to embed.

WEFT will scan your entire site and find every mention of fonts. You'll go through them all, indicating which ones you need embedded and which characters from each font you want (the subsetting), as well as the root directory under which the embedded fonts can be used. Then, specify where you want the created EOT files to go (either an FTP directory on a remote server or a local directory on your hard drive, prefixed with "file:///"). WEFT will make local copies of all relevant Web pages and modify them on your hard drive, and then prompt you to upload them. The modification consists of the addition of CSS code (like that found below) to the head of each page. Once you have the WEFTed fonts uploaded to your site, you can then call them yourself in similar fashion:

<!--
@font-face {
font-family: dungeon;
src: url(fontdir/dungeon.eot);
}
-->

This code interacts with other CSS instructions normally. If you embed both PFR and EOT fonts on your site, the site will work for anybody with Netscape 4, IE4, or IE5.

HINTS, POINTERS, AND TIPS 'O THE TRADE:

Use embedded fonts sparingly. Sure, they're extremely neat, but remember that they do take up bandwidth, and it's doubtful that your users will be as impressed as you are.

Slinging around somebody else's copyrighted fonts without permission is a good way to get in trouble.

Try giving fruit instead of flowers.

RESOURCES:

Fee-based fonts

• The Hoefler Type Family
• The Thirstype Collection
• Adobe Font Folio 8.0

• Chankstore Freefont Archive
• Font Freak
• MediaBuilder FreeFont Library

Webmonkey: Intro to Embedded Fonts

Webmonkey: Using Stylesheets with IE5 — Embedded Fonts

Microsoft: Font Embedding for the Web

HexMac: HPS Reference Gallery

Handcrafted Archive