THE JAVASCRIPT APOSTLE USING DOWNLOADABLE FONTS By Danny Goodman Send comments and questions about this article to View Source. I know I'm getting old when I want to begin an article with a reference to a time that may be B.C. (Before Computer) to a lot of readers. It was in the Fall of 1984 when, as a writer for MacWorld magazine, I got a chance to preview sample output from what would soon be introduced as the first personal laser printer: the Apple LaserWriter. Macintosh users had been composing ransom notes and creating nicely formatted, font-rich documents on the Mac for nearly a year, but the output was clunky on the dot-matrix ImageWriter printer. That was about to change with the help of a font description technology -- PostScript -- and the whizzy new high-resolution output device. Text could literally run in circles without the slice of an X-acto knife or the whiff of fixative. Yet to the untrained eye of everyday folk, the result looked as if it had been painstakingly typeset and pasted up by hand. It's surprising to me that a medium intended for information publishing -- the World Wide Web -- has been so slow to embrace principles that dominate desktop publishing. HTML tagging in the mid-'90s offers little more than WordStar dot commands offered in the '70s (how old is this guy?). Dynamic HTML is finally coming to the rescue, with welcome advances in stylesheets, absolute positioning of elements, and an as yet little-used idea of enhancing a page's text with downloadable fonts other than the boring standard system fonts. In this article, I'll share my early experiences with downloadable fonts in Netscape Communicator and describe how font technology works in a cross-platform browser world. THE AUTHORING PROCESS A lot of what makes downloadable fonts behave in Communicator is built into the browser, so users don't have to do anything to take advantage of the technology. Even so, the author must follow a few steps over and above the normal tagging that goes in the document. After all, the fonts don't fall from trees. Communicator (version 4.01 and later) includes a software gizmo called a Character Shape Player (CSP), which is one component of the TrueDoc technology that Netscape has licensed from Bitstream, Inc., a well-known font vendor. The CSP knows how to render characters based on data that arrives to the browser in the form of a font definition file (also called a Portable Font Resource, or PFR for short). A little bit of HTML in a document, as described later, loads the PFR file into the browser (and browser cache); then font-related HTML -- either tags or stylesheets -- can specify the font(s) from the PFR file by name to be applied to desired sections of the document (or to the whole thing). PFR files are compact compared to the actual font files that you're accustomed to in the operating system. For example, one of the script-like TrueType fonts I play with occupies nearly 48K in its operating system form; when converted to a PFR, it occupies less than 15K -- far more suitable for downloading to a web client even via a dial-up connection. And, like an image, once the PFR file is in the browser's cache, it doesn't have to download again unless the file is purged from the cache. PREPPING THE PFR Creating a PFR file requires an authoring tool that includes the other half of the Bitstream TrueDoc technology, the Character Shape Recorder (CSR). Such tools convert full-fledged TrueType or PostScript fonts installed in your authoring machine's operating system into the necessary PFR file that goes on the server. Bitstream is one step ahead of you if you think you can lift a PFR file for a font you like from a web site but you don't have the original font installed in your system. As you generate the PFR file, you must specify the domain at which the PFR file and HTML document will reside. Any attempt to download the PFR file into a document served from a different domain aborts the font download. If you design custom fonts, this also protects your work from Net theft. I found two other author-friendly aspects of PFR file creation worth noting: You can include definitions of more than one font in a single PFR file. This can simplify font management for a document containing multiple fonts (for example, a regular character font and a symbol font). Also, a single HTTP request can initiate transfer of all downloadable fonts for a site. If you're trying to squeeze every byte out of a PFR file, you can usually ask your font tool to generate shape information for only the characters your document needs. For instance, if you need a few characters from a symbol font, you can save download time by converting only the needed characters into the PFR file. PREPPING THE SERVER A server dishing out a PFR file must know about the MIME type and the .pfr file name extension. Adjust the MIME type settings of your server to handle the application/font-tdpfr MIME type and the .pfr file extension. Tools that create PFR files save the files with the .pfr extension by default. LINKING IN You can design your document font scheme before producing the PFR file. If you use Communicator's Composer module (or some of the other WYSIWYG tools) for authoring page content, you can assign any font from your system to selected text while editing the document. With the font in your system, Navigator uses that system font to render the characters. That's true as well in the deployed world: if a user has a PFR file's font installed in the client, that local font is used by Navigator to generate the characters. To instruct the client to download your PFR file, include a tag in the Head portion of the document with values assigned to the REL and SRC attributes. The REL attribute setting is fixed as fontdef, while the SRC attribute is the relative pathname to the PFR file. For example, if I've created a PFR file that holds two different fonts and saved the file as cursiveFonts.pfr in a subdirectory named fonts, the tag would be: You can include multiple tags in a file if you'd rather not bundle multiple fonts in the same PFR file. Specifying the download action of the font is only the beginning. The creative work comes in assigning the font face to content, as we'll see next. TAGS One way to assign a downloaded font to a hunk o' text is with tags. The key tag attribute is FACE, which lets you specify a hierarchy of fonts that the browser should try to use when rendering content surrounded by the tag. The hierarchy is written as a comma-separated list of font face (or family) names. When the browser encounters this list of font faces, it starts with the first one in the list to see if it's in the system or browser. If that inspection turns up empty (perhaps the font hasn't finished downloading), the next font in line is tried. Most commonly, three font face names are provided when a downloadable font is in play: the downloadable font, a common body font (such as Arial or Helvetica), and a generic font face (most commonly serif, sans-serif, or monospace). The following tag tries to use a downloadable font, but will settle for Arial if it's available, or for the client's default serif font if all else fails: ... The name of the downloadable font face is the actual font name, not the name of the PFR file. Two other tag attributes are Netscape-specific: POINT-SIZE -- This attribute lets you specify an absolute size for the font display. This is different from the SIZE attribute, which is always relative to the default font size of the browser (and which varies among operating system versions of each browser). WEIGHT -- Values for this attribute range from 100 to 900 in increments of 100. Boldness increases with the WEIGHT attribute value, but in my experience not all font faces respond to this attribute. STYLESHEET FONTS Downloadable fonts can also be assigned via stylesheets, with either CSS or JavaScript syntax. For example, to assign the Poster Bodoni font (and fallback positions) to all H1 elements of a document, you would add either of the following stylesheet definitions to the Head portion of your document: or The draft World Wide Web Consortium (W3C) specification for CSS Level 2 forecasts a construction for the CSS syntax that loads an external font into a document from within the Even though the PFR file may contain multiple font definitions, you will need one of these @font-face{} definitions for each of the faces you intend to use in the document. All other stylesheet code for assigning fonts to elements remains the same as the CSS syntax example shown earlier. SCRIPTING STYLESHEETS If you elect to use JavaScript syntax for Navigator-only deployment of your document, you can take advantage of the scripting capabilities that are sometimes overlooked. Not only is JavaScript syntax used for establishing stylesheet settings, but you can write other JavaScript statements around and through the style-related statements. As an example, suppose the page designer wants to use a different font face and size for H1 elements if the page is displayed in a browser window that's wider than 700 pixels. The two font faces are delivered together in one PFR file, but the one that gets assigned to all H1 elements depends on the value of the window.innerWidth property when the page loads (or reloads). Here is how the earlier example of a JavaScript syntax stylesheet would be modified to accommodate two different font faces and sizes: If a user resizes a window such that the window.innerWidth property changes to the other side of the threshold, the sizes of all H1 elements change on the fly. WHAT HAPPENS AT LOAD TIME When a font downloads to the client, it does so asynchronously, similar to the way images and certain other MIME types arrive at the browser. The advantage to this is that the body text appears in the browser window quickly, even if it's not rendered in the downloaded font. After the complete PFR file is downloaded, the browser reflows the content (without triggering load or unload events) using the downloaded font where specified. The down side is that if your downloaded font looks vastly different from the default browser font, the user may be somewhat startled by the flicker and sudden redisplay of a different-looking document. Fortunately, the typically small size of PFR files for one or two fonts does not cause a significant delay between initial text rendering and the pretty reflow. And once the PFR file is in the browser cache, the flicker effect is greatly reduced. This may mean, however, that you limit the use of downloadable fonts on the opening page, but download them there in the background. Then let succeeding pages use the faster, cached font definitions. THE CROSS-PLATFORM SITUATION Despite the ability to specify font families and other attributes in the CSS lingua franca, Communicator and Internet Explorer 4 use entirely different and incompatible downloadable font rendering technologies. But this doesn't mean that you're totally out of luck when designing a page for both browsers. The basic process of preparing a downloadable font is the same for both technologies. The font file generation tools are different (Microsoft has a tool that scans deployed web pages for font information and generates the font definition file), but the source material -- your collection of system fonts -- is the same. You end up with two font definition files (with different file name extensions). Since Internet Explorer doesn't recognize the tag attributes mentioned above, but does recognize the @font-face style attribute, you can use both font-downloading sets of code in the same document, and they won't step on each other. Moreover, only the font definition file compatible with the browser brand will be downloaded to the client. But both clients use the same CSS syntax stylesheets to specify font assignments for the document. Perhaps the best news about employing downloadable fonts on a page is that the document usually degrades nicely when viewed in older browsers. You're not trying to precisely position or hide items as you might with other aspects of Dynamic HTML -- techniques that usually lead to horrific displays on older browsers. Since a downloadable font is applied to body text, and since text is text, users of all browsers, including Lynx and PDA pocket browsers, can read the content. But users of the latest browsers that get cool font displays may feel the same excitement as I did more than a dozen years ago when I first saw an amazing piece of paper ooze out of the LaserWriter. FURTHER RESOURCES The two best starting points for learning more about Netscape's downloadable font implementation are the samples provided by Netscape and Bitstream's web site. One of the authoring tools I enjoyed working with for this article was HexMac's HexWeb Typograph 2.0, which I used in the standalone application version for Windows 95 and in the BBEdit extension version for the Mac. You can research web font activity at the World Wide Web Consortium (W3C), among documents related to evolving standards for HTML 4.0 and CSS2. View Source wants your feedback! Write to us and let us know what you think of this article. Author and consultant Danny Goodman's twenty-fifth book is JavaScript Bible, published by IDG Books. He is still pounding the keyboard on a new book about Dynamic HTML. Last Updated: 12/23/97 10:28:42 Copyright © 1997 Netscape Communications Corporation