Firefox 3.6 “Final” was released today and one of the major addition is the support for the Web Open Font Format or “WOFF”. The result of a collaboration between the font designers Erik van Blokland and Tal Leming with help from Mozilla’s Jonathan Kew.

What is it for? How can you use it? By using the CSS2 @font-face (yes CSS2 not CSS3). This new format is promising because of the large number of support from the font creators and font foundries. Hopefully this will be the first font format that Microsoft® will accept for Internet Explorer browser other than their existing Embedded OpenType or “EOT”.

If IE9 supports WOFF, then this format will be the first cross-browser @font-face/webfont format. There is no question when it comes to Chromium/Chrome, Opera, and Safari, the problem with cross-browser technology is always with MSIE.

Update: Microsoft added WOFF support in Internet Explorer 9 Platform Preview 3.

So how can you start using WOFF? Just follow these simple steps:

1. Search for your font of choice
2. Check the license of your font if it is allowed to be used in a website (sometimes called website embedding). I strongly suggest to contact the font creator/foundry and clarify the matter to them.
   • @font-face fonts or webfonts use “open”/“share”/“freedom” type licenses, examples are:
     • OpenFont License
     • Creative Commons
     • GNU/GPL
     • Apache License
   • If you can not find any, check out Fonts available for @font-face embedding.
3. Go to FontSquirrel’s @font-face generator. The tool is self-explanatory.
4. Then click the “Download Your Kit” button and open the zip file.
5. You should have the following files (assuming you uploaded one font only)
   • Your original font (ttf/otf)
   • 1 eot file
   • 1 svg file
   • 1 woff file
   • stylesheet css files
6. Edit the stylesheet for your own use (the URL location of the font, etc.)

Sample @font-face stylesheet

1
2
3
4
5
6
7
8
9

@font-face {
  font-family: 'BaybayinLopezRegular';
  src: url('baylopez-webfont.eot');
  src: url('baylopez-webfont.woff') format('woff'),
       url('baylopez-webfont.ttf') format('truetype'),
       url('baylopez-webfont.svgz#webfontsBCU3ofZ') format('svg'),
       url('baylopez-webfont.svg#webfontsBCU3ofZ') format('svg');
  unicode-range: U+1700-171F, U+1720-173F, U+1740-175F, U+1760-177F;
}

And here’s what happens when a browser reads your font stylesheet:

1. font-family name declared as: BaybayinLopezRegular
2. If MSIE: downloads baylopez-webfont.eot
3. If not, then it reads the WOFF file if the browser supports it
4. If not, then it reads the TTF file if the browser supports it
5. If not, then the browser reads the SVG file if it supports it
6. If all else fails, then it does nothing. Depending on your setup, it will either display boxes or it will search your other font declarations
7. The browser will also read the unicode-range if it supports it, and only download those specific Unicode points and ignore the rest. Making the size of transmitted to your visitors smaller.

@font-face CSS Rule Browser Compatibility Chart

The table below presents which font format is supported by the four major browsers - Chromium/Chrome, Firefox, Internet Explorer, Opera, and Safari. As you will see, no font format is supported across all five browsers except for WOFF… in the near future.

Microsoft’s EOT is out of the race, even though many font creators and foundries support it, the other four browsers are likely never going to support it. Then OTF, SVG, and TTF are out too because Internet Explorer is surely never going to implement it, and font creators/foundries do not like these formats for @font-face use.

That is where WOFF comes in. Commercial font creators and font foundries wants control (or restriction if you want it that way) to the fonts that can be used for the CSS @font-face rule.

Of course there are other advantages to WOFF like compression. WOFF is compressed, which site administrators will like because it eats less bandwidth. You can go check the fonts that came with your FontSquirrel generated font kit, WOFF is the smallest of them.

For now as with all new technologies, we have to wait until all major browsers adds support for WOFF. But that should not stop you from using it today. Just like with CSS3 and some HTML5, you can use it right now. It will save you time later if you do the update now than whenever you feel like to, which you will probably forget.

Let’s Test Your Browser

If you see the Baybayin writing script below, then your browser supports one of the font formats - EOT, OTF, SVG, TTF, or WOFF. If not, then you should upgrade your browser because my font stylesheet captures all browsers. (At least from my testing, on two computers without any Baybayin fonts - it displays correctly on all the major browsers.)

Example #1

• Filipino-Baybayin: ᜀᜅ᜔ ᜊᜓᜃᜓ ᜀᜌ᜔ ᜉᜍ ᜐ ᜆᜂ ᜇᜑᜒᜎ᜔ ᜏᜎ ᜈᜅ᜔ ᜉᜓᜏᜒᜇᜒᜅ᜔ ᜋᜁᜈᜓᜋ᜔ ᜈ ᜄᜆᜐ᜔᜶

• Filipino-Latin: Ang buko ay para sa tao dahil wala nang puwedeng mainom na gatas.

• English: The coconut is for people because there is not enough milk to drink.

Example #2

• Filipino-Baybayin: ᜉᜓᜏᜒᜇᜒ ᜃᜅ᜔ ᜌᜓᜋᜋᜈ᜔ ᜇᜑᜒᜎ᜔ ᜐ ᜊᜄᜓᜅ᜔ ᜍᜓᜎᜒᜆ᜶

• Filipino-Latin: Puwede kang yumaman dahil sa bagong roleta.

• English: You can be rich because of the new wheel.

Enjoy!

Sources:

• Web Open Font Format for Firefox 3.6
• Web typography
• Mozilla Supports Web Open Font Format (includes a list of font creators and font foundries supporting WOFF)