Evangelism/Firefox3.6/WOFF
|
THIS PAGE IS A WORKING DRAFT | 
|
| The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly. If you have any questions or ideas, please add them as a new topic on the discussion page. |
Introducing support for the WOFF font format
Support for the CSS @font-face rule was introduced in Firefox 3.5, a way of linking directly to TrueType and OpenType fonts. For Firefox 3.6, support for the WOFF font format has been added. The WOFF format is a simple way of packaging fonts for the web, the fonts are compressed so they are typically smaller than directly linked OpenType or TrueType fonts.
The WOFF format originated from a collabaration between the font designers Erik van Blokland and Tal Leming and Mozilla's Jonathan Kew. Each had proposed their own format and WOFF represents a melding of these different proposals. The format itself is intended to be a simple repackaging of OpenType or TrueType font data, it doesn't introduce any new behavior, alter the @font-face linking mechanism or affect the way fonts are rendered. Many font vendors have expressed support for this new format so the hope is this will open up a wider range of font options for web designers.
Compression is part of the WOFF format so web authors can optimize the size of fonts used on their pages. The compression format is lossless, the uncompressed font data will match that of the original OpenType or TrueType font, so the way the font renders will be the same as the original. Similar compression can be achieved using general HTTP compression but because compression is part of the WOFF format, it's simpler for authors to use, especially in situations where access to server configuration is not possible.
The format includes optional metadata so that a font vendor can tag their fonts with information related to font usage. This metadata doesn't affect how fonts are loaded but tools can use this information to identify the source of a given font, so that those interested in the design of a given page can track down the fonts used on that page. Fonts in WOFF format are compressed but are not encrypted, the format should not be viewed as a “secure” format by those looking for a mechanism to strictly regulate and control font use.
Note: until Firefox 3.6 ships, users can test the use of WOFF fonts with Firefox nightly builds.
Examples
Below is a simple example that shows how to construct an @font-face rule that links to a WOFF font. To support browsers that only support direct linking to OpenType and TrueType fonts, the 'src' descriptor lists the WOFF font first along with a format hint ("woff"), followed by the TrueType version:
/* Gentium (SIL International) */
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.woff) format("woff"), url(fonts/GenR102.ttf) format("truetype");
}
body {
font-family: GentiumTest, Times, Times New Roman, serif;
}
Structured this way, browsers that support the WOFF format will download the WOFF file. Other browsers that support @font-face but don't yet support the WOFF format will use the TrueType version. (Note: IE support is a bit trickier, as discussed below).
Other examples below demostrate the use of WOFF formatted fonts but each example has been constructed so that it will work in any browser that supports @font-face, including Internet Explorer.
A font family with multiple faces
Using a Postscript CFF font
African Language Display
Below is an example of how downloadable fonts can be used to render languages for which font support is usually lacking. The example shows the UN Declaration of Human Rights, translated into two African languages, and how these render with default browser fonts vs. with a downloadable font suited for rendering these languages:
Another Postscript CFF font
An example in Japanese
Working With Other Browsers
Firefox 3.6 will be the first shipping browser to support the WOFF format so it's important to construct @font-face rules that work with browsers lacking WOFF support. One thing that helps greatly with this is the use of format hints to indicate the format of font data before it's downloaded; browsers that don't recognize a given format simply skip data in a format they don't support.
Internet Explorer, including IE8, only supports the EOT font format and only implements a subset of the @font-face rule descriptors. This makes creating cross-platform @font-face rules that work with IE especially tricky. One solution is to make different rules for IE:
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.eot); /* for IE */
}
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.woff) format("woff"); /* WOFF-enabled browsers */
}
One minor downside of this is that IE doesn't understand format hints and doesn't parse @font-face URL's correctly, it treats format hints as part of the URL, so web authors using the @font-face rules above will see the following in their access logs:
GET /fonts/GenR102.eot HTTP/1.1" 200 303536 GET /fonts/GenR102.woff)%20format(%22woff%22) HTTP/1.1" 404 335
IE successfully pulls down and uses the EOT version of the font but also tries to pull down the WOFF font with the format hint included in the URL. This fails and doesn't affecting page rendering but it wastes valuable server resources. For more discussion, see Paul Irish's blog post for one interesting workaround.
Another problem is that IE currently tries to download all fonts on the page, whether they are used or not. That makes site-wide stylesheets containing all fonts used on site pages difficult, since IE will always try to download all fonts defined in @font-face rules, wasting lots of server bandwidth.
Future Work
Using @font-face allows web designers a wide palette of font choices and with commercial font vendors supporting WOFF, the set of font choices should improve even more. So the next step is clearly to try and make better use of features available in these fonts.
For many years, "smart" font formats such as OpenType and AAT have provided font designers ways of including a rich set of variations in their fonts, from ligatures and swashes to small caps and tabular figures. The OpenType specification describes these features, identifying each with a unique feature tag. But these have typically only been available to those using professional publishing applications such as Adobe InDesign. Firefox currently renders using font defaults; it would be much more interesting to provide web authors with a way of controlling these font features via CSS.
Håkon Wium Lie of Opera, based on discussions with Tal Leming and Adam Twardoch, proposed extending the CSS 'font-variant' property to include values for font features. Mozilla is actively working on a new proposal along these lines. This is a fairly big addition to CSS, so it will most likely involve some complex discussions about how best to support these features.
As part of this effort, Jonathan Kew has been working on porting a portion of the Pango library for use with handling complex scripts and to enable the use of font features on all supported platforms. He currently has an experimental build that uses a special CSS property to associate a list of OpenType features with specific elements in a page. This is not the proposed format, it simply provides a better way of discussing possible sets of font-variant properties and the OpenType feature settings to which they should map.
.altstyles {
/* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
-moz-font-feature-opentype: "dlig=1,ss01=1";
}
The feature setting string above implies rendering with discretionary ligatures (dlig) and the first set of stylistic alternates (ss01). An example using Jack Usine's MEgalopolis Extra:
This font makes extensive use of OpenType features; the homepage of the font contains a sample rendering that uses many of these features. Below is a rendering of the same sample written in HTML with OpenType features enabled:
Tabular Figures for Numerical Alignment
OpenType features also enable better control over alignment. When numbers are listed in tabular form, proportional forms often result in the misalignment of digits across rows, making the list harder to scan. With tabular alignment enabled, individual digits are rendered using a fixed width so that digits align across rows:
Automatic Fractions
Automatic fractions are also possible with OpenType features, note the inline use of fractional forms in the recipe ingredient list below:
Historical Text
The way text is rendered constantly evolves; glyphs once in common use often morph into other forms, making the historical forms distinct from their modern forms. Below is the text of an old Massachusetts Bay Colony law, taken from a book in the Boston College Law Library Rare Book Collection.
Original scanned image:
As rendered in HTML using the Fell Types revival fonts by Igino Marini with OpenType features enabled. Note the ‘ct’ ligature and the contextual form of the ‘s’:
Draconian laws in HTML form, what is the world coming to?
Further Resources
Documentation
- Latest draft WOFF specification
- Original blog post on using @font-face
- CSS3 Fonts working draft
- MDC @font-face documentation
- font feature support proposal
- OpenType font feature list
Tools
- Jonathan Kew's sample encoding/decoding code
- woffTools - Python tools for validating WOFF fonts
- FontTools/TTX - Python scripts for displaying font data
General @font-face Examples
- CSS @ Ten: The Next Big Thing
- Example layout using Graublau Sans
- Examples of Interesting Web Typography
- The Elements of Typographic Style Applied to the Web