When Firefox 3.6 was released on January 21, nestled in alongside all of its other new features was support for a new font specification, the Web Open Font Format (WOFF). WOFF is designed to better meet the needs of Web designers as they build sites with typography that outshines what is provided by the same old “Web safe” faces (Helvetica, Arial, Time New Roman, and the like). While CSS3 can link-in fonts in any format, WOFF fonts save considerable space — and thus bandwidth — compared to TrueType and OpenType.

Background: @font-face

WOFF is intended to work with the CSS @font-face selector. This feature builds on CSS’s previous font rules, allowing you to not only list alternatives for the font in which to render text, but to provide a URL from which a font can be downloaded. When a page is loaded, the referenced font is fetched from the server in the background, just like the images, stylesheets, embedded media, and all other content.

Making use of it has two steps. First, you define a “name” for the font, then you reference it just as you would any “Web safe” or generic font. For example,

@font-face {
  font-family: myCompanyMasthead;
  src: url( /media/fonts/mCL.ttf ) format("truetype");}

defines myCompanyMasthead as a font family. This name does not exist anywhere else; we made it up. But the src property tells the browser to fetch the file mCL.ttf from our Web server and use it whenever this font family is referenced in the page. Consequently, the CSS rule h1.mast { font-family: myCompanyMasthead, helvetica, arial, sans-serif; } tells the browser to use our newly-defined font for rendering H1 tags
of the “mast” class — falling back on Helvetica and then Arial. If visitors’ browsers don’t support @font-face, they will still see the content, just in a different typeface. But for modern browsers, we can ensure that the site masthead is rendered in the exact same font that we use on our letterhead and envelopes, without resorting to rendering it as an image.

The idea seems so simple that it’s often hard to imagine that it took this long to appear. But the reality behind the situation is that Web font support has been a long time coming, thanks to battles between browser and operating system makers, standards bodies and type foundries. Commercial type designers, who were used to a business model in which they sold fonts to advertising/design firms and publishers almost exclusively for use in producing printed materials, bristled at the notion that their product would be freely transferred over the Internet. How could they ever expect to sell a quality font to a Web designer if the designer could just as easily fetch it off of another site? Pirates could crawl the Web looking for @font-face rules and harvest everyone’s fonts en masse.

The result was years of fighting over digital restrictions and encryption schemes designed to limit how Web fonts could function. This produced formats like Microsoft’s Embedded OpenType (EOT) format. EOT was not an open standard, was IE-only, and didn’t take off; resulting in a rejection by the W3C. Only in relatively recent times, in particular after @font-face took off when used with TrueType and OpenType fonts, has momentum built to develop a truly open Web font format.

WOFF development

Although @font-face has been a success, the large size of some TrueType and OpenType font files led some to conclude that there was need for a compressed file format targeting the Web. Mozilla’s expert typographer Jonathan Kew teamed up with Tal Leming and Erik van Blokland from the font foundries Type Supply and LettError, respectively, to work on a specification in mid-2009.

WOFF is the result of that collaboration. The first draft was released in September; the most recent revision is from October 23. The basic format of WOFF is the same as structure used by TrueType, OpenType, and Open Font Format fonts, which are all known as sfnt (or “spline fonts”). The file contains a number of tables of character glyphs, an index, and various metadata and header blocks. The important difference is that WOFF uses zlib compression to dramatically reduce the size of the file.

The exact savings vary, of course, but in many real-world comparisons, a .woff file is often 1/3 the size of its .ttf equivalent. You use WOFF files exactly as you would TrueType or OpenType fonts; in your CSS selector, simply specify the file and format:

@font-face {
  font-family: myCompanyMasthead;
  src: url ( /media/fonts/mCL.woff ) format("woff");}

Despite its relative youth, WOFF is well on its way to becoming an officially sanctioned W3C format. It has the support of nearly three dozen professional type foundries, in addition to Mozilla and the open font community. In January, the commercial font-hosting provider Typekit announced that it would start serving WOFF fonts to supporting browsers. This is a significant endorsement, since Typekit makes its money serving up web fonts; the bandwidth savings to the company by shrinking all of the files it serves would be significant indeed.

Tools

Firefox is the first Web browser to support WOFF, but expect more to follow. In the meantime, other typography-related software tools are adding their own support for the WOFF format.

Kew has a straightforward tool called sfnt2woff available at his Web site that will convert any TrueType or OpenType font file into a compliant WOFF file. There are binaries for Windows and OS X, and source code for Linux. Other available tools are listed at the Mozilla blog, including WOFF validators, CSS rule generators, and Pythong utilities.

WOFF support is also brand-new in the development version of the FontForge font editor. To take advantage of it, you must retrieve and compile the FontForge source code, however, so for casual users converting existing fonts with sfnt2woff may be simpler.

If you are designing or re-designing your site and want to make use of WOFF, take a few minutes to read up on compatibility hints from CSS professionals. As with most other design details, to achieve consistent results you will need to consider the various quirks and limitations of Firefox, Chrome, Opera, Safari, IE, and other browsers. Fortunately, @font-face allows you to specify alternate URLs for each font-family definition, so it is possible to serve small WOFF files to supported browsers, and fall back on the heavier font formats for unsupported browsers.

The road to Web fonts has been a rocky one, to be sure, but CSS’s @font-face is now an established standard. WOFF, although comparatively new, has the backing of enough industry players. Together they bring flexible typography to the Web in a way that is long overdue. Most businesses expend considerable effort on branding, and want to ensure that their printed materials — from signs to publications to letterhead and envelopes — use consistent typography. Now they can add the company Web site to that list.

By Nathan Willis