Mozilla

This article was written by John Daggett. John is a Mozilla contributor and has been working hard with font creators and web developers to improve the state of fonts on the web. This article is a high-level overview of whats different and shows some examples of WOFF in use. A full list of other supporting organizations can be found at the official Mozilla Blog.

In Firefox 3.5 we included support for linking to TrueType and OpenType fonts. In Firefox 3.6 we’re including support for a new font format – the Web Open Font Format, or WOFF. This format has two main advantages over raw TrueType or OpenType fonts.

  1. It is compressed, which means that you will typically see much smaller download sizes compared with raw TrueType or OpenType fonts.
  2. It contains information that allows you to see where the font came from – without DRM or labeling for a specific domain – which means it has support from a large number of font creators and font foundries.

The WOFF format originated from a collabaration between the font designers Erik van Blokland and Tal Leming with help from 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.

Details on Differences between TrueType, OpenType and WOFF

First, 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.

Second, 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). As WOFF is adopted more widely the need to include links to multiple font formats will diminish.

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.

Note that in one of these examples that the font size goes from a 3.1MB TTF to a 1MB WOFF font and in the other from a 172KB TTF to an 80KB WOFF file.

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;
  /* Works only in WOFF-enabled browsers */
  src: url(fonts/GenR102.woff) format("woff"); 
}

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.

Further Resources

Documentation

Latest draft WOFF specification
Original blog post on using @font-face
CSS3 Fonts working draft
MDC @font-face documentation

Tools

Jonathan Kew’s sample encoding/decoding code
woffTools – tools for examining and validating WOFF files
FontTools/TTX – Python library and tool for manipulating font data
Web-based font subsetting tool

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

Font Resources

Font Squirrel
10 Great Free Fonts for @font-face
40 Excellent Free Fonts by Smashing Magazine

255 comments

Comments are now closed.

  1. Pingback from Mozilla Supports Web Open Font Format :: The Mozilla Blog on October 20th, 2009 at 09:02:

    [...] official endoresement and supporting organizations can be found below.  Hacks.mozilla.org also has a full post about WOFF implementation for Firefox 3.6 and beyond. We endorse the WOFF specification, with default same-origin loading [...]

  2. Ivo wrote on October 20th, 2009 at 09:55:

    Using the mentioned Firefox nightly builds you can see what WOFF could look like on a sample page FSI FontShop International designed together with the guys from Edenspiekermann using both FF Meta and FF Meta Serif to endorse the WOFF specification: edenspiekermann.com/woff.

  3. Greg K Nicholson wrote on October 20th, 2009 at 10:55:

    Or you could put an EOT-format file at /fonts/GenR102.woff)%20format(%22woff%22)

    Then you’d be able to reduce the CSS syntax back to the first example.

  4. John Daggett wrote on October 20th, 2009 at 14:39:

    @Ivo
    Fantastic, thanks for your support!

    @Greg K Nicholson
    Yes, but if you edited that list you would quietly break the link to the EOT font. So it’s possible but somewhat brittle in practice.

  5. Ivo wrote on October 20th, 2009 at 14:51:

    Thanks for supporting the foundries, John.

    For those who don’t have the latest Firefox build installed [probably the bigger part of your readers], here you can find a screenshot, which shows the beautiness of typographic diversity on the web.

  6. Pingback from Mozilla Formally Announces Support For WOFF (Web Open Font Format) on October 20th, 2009 at 21:15:

    [...] Mozilla has now made a formal statement regarding support for the Web Open Font Format. Plus a nice writeup on the whys and wherefores of WOFF by Firefox font honcho John Daggett. Kudos to all who helped [...]

  7. Richard Fink wrote on October 20th, 2009 at 21:38:

    @john
    Congrats to all on a job elegantly done.
    Among font vendors it would seem you’ve gone from being the Devil incarnate to Saint John the Divine. And in the space of less than a year.
    Cool beans.

    rich

  8. John Daggett wrote on October 20th, 2009 at 22:20:

    @Richard Fink
    Thanks. Much of the work for this was done by Tal, Erik and Jonathan, they deserve the credit for bringing this to fruition.

    Lots of devilish work ahead. More tomorrow.

  9. Tom Phelps wrote on October 21st, 2009 at 00:20:

    For fonts with a large number of glyphs, it is important to have random access to glyph data, so that you don’t spend the time and memory reading in, say, the 32,000 glyphs of a CJK font of which you only use 100. The Deflate compression is stream based, so if you kept the glyph data compressed and read each glyph as needed, as is common and efficient practice with TrueType and OpenType fonts, then on average you would have to decompress half of the glyph data for each glyph.

    Alternatively, upon downloading the font the client could decompress all tables (if you’re uncompressing the glyph data you may as well uncompress everything since for most fonts the glyph data is by far the largest table). But if you uncompress, you may as well rely on the server’s HTTP compression and have a simpler specification. (And if there is no internal compression, the metadata could be put into a new table and WOFF fonts could be compatible with existing TrueType and OpenType.)

    What is the recommended or Mozilla way to handle fonts with large glyph data that is compressed internally?

  10. Pingback from Firefox’s Future Features: 3.6, 3.7, and 4.0 « The Tech Guia on October 21st, 2009 at 08:11:

    [...] Firefox 3.6 will support Open Web Font, a font format that supports compression and metadata to let the origins of a typeface be tracked [...]

  11. John wrote on October 21st, 2009 at 08:12:

    Why no EOT support? Doesn’t that mean that cross-browser font support will be a pipe-dream for the foreseeable future (until IE6, IE7 AND IE8 dies, let alone the other browsers catching up)?

    What sort of file format is WOFF? Are Google/Opera/Apple/Microsoft all happy with WOFF, or is it Mozilla proprietary? Does it require dedicated tools or can it be made by hand? Has a spec been published anywhere? Is Mozilla planning making the tools to allow people to convert to and from other font formats? Are the font foundries signed up? What about the font software manufacturers?

  12. Pingback from Options for using special fonts on the web | homer gaines on October 21st, 2009 at 08:25:

    [...] announced the support of the WOFF file format in the upcoming Firefox (3.6) release. WOFF fonts are a smaller, [...]

  13. Pingback from after Firefox 3.6 – new font control features for designers at hacks.mozilla.org on October 21st, 2009 at 09:01:

    [...] About « Web Open Font Format for Firefox 3.6 [...]

  14. Raju Bitter wrote on October 21st, 2009 at 09:04:

    Great work, will make it a lot easier to use downloadable fonts and not running into problems with making font files available on a public web server.
    Downloadable font support in Firefox 3.5 has already been added to OpenLaszlo (Ajax/JavaScript runtime), and I filed a JIRA issue to support WOFF just now!

  15. Pingback from BlogZilla » Firefox 3.6 e i nuovi font scaricabili on October 21st, 2009 at 11:06:

    [...] l’introduzione, in Firefox 3.5, dei font scaricabili in formato TrueType e OpenType, Mozilla si prepara a introdurre i propri utenti all’ennesima novità in fatto di design e web experience [...]

  16. Pingback from Web Open Font Format support for Firefox 3.6 | Browser Watch on October 21st, 2009 at 16:04:

    [...] example given by Mozilla Hacks shows a 3.1MB TrueType Font compressed to a 1MB WOFF, quite a massive [...]

  17. John Daggett wrote on October 22nd, 2009 at 06:30:

    @John
    The resources section contains links to the spec and sample code. You can read more of the background discussion of the format on the www-font mailing list.

    http://lists.w3.org/Archives/Public/www-font/

    @Tom Phelps
    Right now the format is relatively simple, tables are either compressed or not, there’s no way to do partial decompression on a given table. CJK fonts are an interesting example, you probably don’t want to send 32,000 glyphs in any form, compressed or not. A format for the future would be one that allowed separate chunks containing sets of glyphs to be downloaded and dynamically linked to the original font when needed. But that’s a very, very tricky problem. Another approach would be to consider a stroke-based format, taking advantage of the common elements in CJK glyphs. But I don’t know of any open format for stroke-based glyphs.

  18. Pingback from Type on the internet « Type Two on October 22nd, 2009 at 11:24:

    [...] Updates for Firefox [...]

  19. Pingback from Firefox’s future features: 3.6, 3.7, and 4.0 « The Net Adrenaline on October 23rd, 2009 at 07:52:

    [...] Finally, Firefox 3.6 will support Open Web Font, a font format that supports compression and metadata to let the origins of a typeface be tracked down. [...]

  20. Pingback from Font Dragr: A drag and drop font tester | The CSS Ninja - All things CSS, Javascript & xhtml on October 23rd, 2009 at 14:41:

    [...] conjunction with Mozilla’s official announcement for the Web Open Font Format (WOFF) and continuing the wanky tradition of removing vowels from web app names, I introduce font dragr. [...]

  21. Pingback from cssing :: Архив :: font-face оживление on October 24th, 2009 at 03:52:

    [...] он вам генерирует .svg версию шрифта, .eot версию шрифта, и даже WOFF версию (формат для новых Firefox). Вдобавок ко всему, CSS файл с [...]

  22. dfghdgdfh wrote on October 25th, 2009 at 07:42:

    What about svg fonts?

  23. dfgdfhjdfhf wrote on October 25th, 2009 at 07:47:

    No mentioning of svg fonts is kind of a drawback.
    Open and TrueType fonts all good but svgfonts provide a step forward because they’re vector based.
    Why doesn’t Firefox support svgfonts, they exist for a while and Opera 10 supports them.

  24. Pingback from Crea tu kit de @font-face fácilmente « Raymundo.Aaron on October 27th, 2009 at 15:59:

    [...] Además, nos permite crear una archivo WOFF que tienen varias ventajas (sobre todo en el peso) contra los TTF-OTF, este archivo será soportado por Firefox 3.6 [...]

  25. Pingback from Fluid Web Typography is done! | { speaking in styles } on October 28th, 2009 at 09:57:

    [...] you to upload any font file and convert it not only to EOT, but SVG as well. Then a few days later, Mozilla announces support for the WOFF format in the next release of Firefox, which had only just been announced as a draft. Only days later Font Squirrel added WOFF [...]

  26. Doc wrote on October 30th, 2009 at 18:05:

    Followed a link on Lifehacker.com here…why is it that BROWSER DESIGNERS can’t design a website with FLUID WIDTH PAGES? I’ve got a 1680×1050 screen, and the main body of the site barely takes up 50% of the width of my screen. Get a clue, designers!

  27. Pingback from Novo firefox « Os melhores deskmod's on October 31st, 2009 at 06:21:

    [...] a WOFF (web open font [...]

  28. עורך דין פלילי wrote on November 3rd, 2009 at 05:45:

    does WOFF support RTL ?

  29. Pingback from Browser Beta Roundup: Firefox 3.6b1, Chrome 4 on November 4th, 2009 at 16:01:

    [...] November 4th, 2009 (3:00pm) Simon Mackie No CommentsTweet This The browser war continues to rage unabated, with the end result being better products for us, the users. This past week has seen significant beta updates to my two favorite browsers: Chrome and Firefox. I’ve been playing with beta 1 of Mozilla’s Firefox 3.6. This new version of Firefox boasts improved performance, personas (the ability to easily switch between different skins for your browser), and updated support for web standards, including support for the Web Open Font Format (WOFF). [...]

  30. Pingback from Web Open Font Format Will Change Web Design – Max Kiesler - Designer on November 8th, 2009 at 22:31:

    [...] and it has the backing of a wide array of type designers and type foundries. Mozilla will also include support for it in Firefox [...]

  31. Pingback from AS3 WOFF Parser | MadeByPi® Blog on November 9th, 2009 at 02:47:

    [...] recently stumbled upon the Web Open Font Format (WOFF) when trying out the Firefox 3.6 beta, and thanks to the well documented WOFF file format, [...]

  32. Pingback from BlogoFlux – Information Technology Blog | Latest Technology News| » Blog Archive » Mozilla Firefox 3.6 Beta 2 Released on November 10th, 2009 at 21:19:

    [...] Support for the WOFF font format. [...]

  33. Pingback from Firefox 3.6 Beta 2 publicado! | iTechezx - Una Guia Technologia on November 10th, 2009 at 22:31:

    [...] Soporte para el formato de fuente WOFF. [...]

  34. Pingback from Firefox 3.6 Beta 2发布 修复190多个Bug | MaxBeta.COM_测试版鲜活资讯 on November 11th, 2009 at 05:52:

    [...] Support for the WOFF font format. [...]

  35. Pingback from Download Mozilla Firefox 3.6 Beta 2 | tech-Know kishan on November 11th, 2009 at 09:26:

    [...] native video can now be displayed full screen, and supports poster frames.Support for the WOFF font format.Improved JavaScript performance, overall browser responsiveness and startup time.Support for new [...]

  36. Pingback from Firefox 3.6 Beta (revision 2) update published | Easy Firefox on November 11th, 2009 at 11:01:

    [...] Support for the WOFF font format. [...]

  37. Pingback from Mozilla Firefox 3.6 Beta 2. « WastedNet: Blog on November 11th, 2009 at 11:11:

    [...] Support for the WOFF font format. [...]

  38. Pingback from Mozilla Firefox 3.6 Beta 2 « News, Software and All you need on November 11th, 2009 at 13:13:

    [...] Suporte para formatos fonte WOFF. [...]

  39. Pingback from Firefox 3.6 beta 2, disponible on November 11th, 2009 at 19:51:

    [...] navegador y el usuario.El video nativo abierto puede mostrarse en pantalla completa.Soporte para el formato web de fuentes abierta.Mejoras en el rendimiento de JavaScript, en la capadidad de respuesta general y a la hora del [...]

  40. Pingback from Firefox 3.6 Beta 2 Released « The Firefox Extension Guru’s Blog on November 12th, 2009 at 00:12:

    [...] Support for the WOFF font format. [...]

  41. Pingback from операционные системы Linux/BSD » Вышла вторая бета-версия Firefox 3.6 on November 12th, 2009 at 00:47:

    [...] формата Web Open Font Format (WOFF) для распространения шрифтов OpenType, Open Font Format или [...]

  42. dellamowi_k wrote on November 13th, 2009 at 06:39:

    I don’t think that these downloadable fonts are usable in a website design context. The fact that you can see the text change fonts at each page load is painful to the eyes.

  43. Pingback from Firefox 3.6 Beta 1 is Now Available for Download… « my_ideas sleep furiously on November 13th, 2009 at 09:34:

    [...] Support for the WOFF font format. [...]

  44. Pingback from Fillet-of-Soule.com » Blog Archive » Fonts on the web on November 13th, 2009 at 22:45:

    [...] in their latest versions, support the more common .TTF and .OTF files. Firefox 3.6 will support .WOFF which hopes to be the new standard in web font filetypes. Chrome supports .TTF and .OTF as well, [...]

  45. Pingback from Firefox 3.6 Announces Beta 1 | Ranjith Siji | Programming the Web on November 14th, 2009 at 23:24:

    [...] Support for the WOFF font format. [...]

  46. Pingback from Nothing Blog : Webdesigner, freut euch auf WOFF! on November 16th, 2009 at 08:30:

    [...] dem Erscheinen von Firefox 3.6 werden wir den Einsatz von WOFF kritisch in Erwägung ziehen. Für den praktischen, [...]

  47. Pingback from Above The Fold » Mozilla Firefox 3.6 Beta Coverage on November 16th, 2009 at 18:12:

    [...] Support for the WOFF font format. [...]

  48. Pingback from jjgod / blog - 闲聊文本渲染技术的近期发展 on November 17th, 2009 at 22:47:

    [...] Kew 虽然仍然在开发 TeXworks,但工作的重心已经放到了 Mozilla Firefox 3.6 的 WOFF 格式和 OpenType 复杂排版支持上,最近的一个视频里 Jonathan [...]

  49. Pingback from On the Edge « Voidnothings on November 18th, 2009 at 07:39:

    [...] Played with typography on the web using WOFF fonts? [...]

  50. Pingback from Talking » Firefox Beta 3.6(Revision 3) on November 19th, 2009 at 22:07:

    [...] Support for the WOFF font format. [...]

1 2 3 6

Comments are closed for this article.