Introducing WOFF (Web Open Font Format)

By Zi Bin Cheah

Introduction

Opera's Håkon Wium Lie first publicized the idea of freely downloadable fonts, the idea being to give designers the freedom to choose fonts of their preference beyond the traditional "web safe font set". This formed the basis of Web Fonts.

We first implemented Web Fonts in Opera 10. Web fonts allow linkage of font files (Opera initially supported TrueType, OpenType and SVG fonts) via special @font-face at-rules in CSS, resulting in linked fonts being downloaded "on the fly" to the users' computers when web pages are accessed.

In Opera 11.10 (grab the latest 11.10 snapshot from the Opera desktop team blog), we've included support for a new font packaging format called Web Open Font Format (WOFF). This format, proposed jointly by Opera, Microsoft and Mozilla, acts as a container for TrueType and OpenType fonts, reducing file size, and allowing you to include extra information in with the font, such as font licensing. This article provides a concise introduction to WOFF, looking at why it was created, what font foundries are supporting the format, where you can get WOFF fonts from, and showcasing some examples at the end.

Why WOFF?

We already know that Web Fonts bring us many benefits such as better typography without a compromise to accessibility, SEO or data interoperability. WOFF brings additional benefits to the table, as follows:

It's a compressed container format, therefore offers a reduction in file size. For example, the Orbitron typeface is 16kb in WOFF format, 48kb in EOT and TTF, and 20kb in OTF.
Origin information is included in a metadata file placed inside the container: we can see where the font came from by looking at the vendor element in the metadata.
The license agreement is noted inside the license element in the metadata, therefore it is easier for vendors to know if Web Font usage is adhering to the font licenses.
Familiar syntax: you can use the same @font-face syntax to utilize WOFF fonts in your work.

For more information on what data can be included in WOFF metadata files, and examples of such files, read the WOFF File Format 1.0 specification. The metadata examples are in Appendix A.

Foundries and browsers including IE have gathered to support this format, and support should continue to grow.

Where can I get WOFF fonts?

There are some good open source font foundries out there. The ones we like are Font squirrel, the League of movable type and Unicode Font. Unfortunately most of the fonts available from these foundries are not yet available in WOFF packages, so what can we do?

Many open licensed fonts can be turned into WOFF fonts with ease. For example, the SIL Open Font License (OFL) - a popular license for font types - explicitly says that you can modify and repackage fonts released under this license. All you need is an OTF/TTF file to covert. You can feed this into Font Squirrel's @font-face generator and generate either a bunch of different font formats to support the full gamut of modern browsers, or just the WOFF format (choose the "expert" options).

Another useful tool to have is the sfnt2woff font generator command line tool, created by the nice people of Mozilla. There are Mac and Windows versions available.

Examples


@font-face {
  font-family: 'raleway';
  src: url('raleway_thin-webfont.woff') format('woff');
  font-style: normal;
}

em {
  font-family: raleway, serif;
  color: #F45355;
 
}


  @font-face {
  
    font-family: 'procionott';
    src: url('procionott-webfont.woff') format('woff');
    font-style: normal;
}

#subtext #image1{
	font-family: procionott, serif;
}

Conclusion

We are pleased to have brought WOFF support to the Opera browser. It can only continue to make web fonts easier for font foundries to distribute, designers to use, and users to enjoy.

Zi Bin Cheah

Web Evangelist in the Developer Relations Team at Opera Software ASA.

This article is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Unported license.