LaBoX

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 it is CSS2 not CSS3). This new format is promising because it has a large number of support from the font creators and font foundries, and 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’s no question when it comes to Chromium/Chrome, Opera, and Safari, the problem with cross-browser tech is always with MSIE.

Follow up:

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

1. Look for your font of choice
2. Check the license of your font if it allows website use (sometimes called website embedding). I strongly suggest contacting the font creator/foundry for crystal clear clarification.
• @font-face fonts or webfonts use “open"/"share"/"freedom” type licenses, examples are:
• OpenFont License
• Creative Commons
• GNU/GPL
• Apache License
• If you can’t find any, check out Fonts available for @font-face embedding
3. Go to FontSquirrel’s @font-face generator. The tool is self-explanatory, but I suggest the settings below:
• Base Font Format: No Format Change
• Alt Font Formats: EOT, SVG, WOFF
• Options: Use Existing Hints
4. Then click the ‘Download Your Kit’ button and open the zipped file
5. You should have the following files (assuming you uploaded 1 font only)
• Your original font (ttf/otf)
• 1 eot; 1 svg; 1 woff files
• base64_stylesheet and stylesheet css files
6. Edit the stylesheet for your own use (the URL location of the font, etc.)

Here is my fonts stylesheet:

CSS:

How about the base64_stylesheet file? If you want to save some bandwidth and gain some speed, you can copy the part of the base64 stylesheet (see my stylesheet above) and add it to your stylesheet. (A note: base64 font is very long, I truncated my example above for presentation purposes.)

Now here’s what happens when a browser reads your fonts stylesheet:

1. font-family name declared as: Baybayin Stylized
2. If MSIE: downloads BaybayinStylized.eot
3. else check the visitor’s machine for font name “Baybayin Stylized Medium” or “BaybayinStylized” or “Baybayin Stylized”
4. else if the browser supports base64 fonts, it reads url(data:font…..) format(’truetype’)
5. if not, then the browser reads the SVG file if it supports it
6. if not, then it reads the WOFF file if it supports it
7. if not, then it reads the TTF file if it supports it
8. 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
9. The browser will also read the unicode-range if it supports it, and only download those glyphs.

@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 the major browsers, but WOFF has the biggest potential to become the cross-browser format.

Microsoft’s EOT is out of the race, even though many font creators and font foundries support this format the other four browsers are likely never 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’s 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. At the same time, browser vendors will like it because it isn’t Microsft (note: ok that isn’t the reason… I actually can’t remember the real reason why they don’t want EOT ).

Of course there are other advantages to WOFF like compression. WOFF is compressed, which site admins 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 the other major browsers adds support to WOFF. But that shouldn’t stop you from using it already, just like with CSS3 and some HTML5, you can use it today. Besides, doing it now will save you from the trouble of updating your site later.

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 own testing, on two computers without the Baybayin fonts - it displays correctly on all four major browsers.)

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.

Filipino-Baybayin: ᜉᜓᜏᜒᜇᜒ ᜃᜅ᜔ ᜌᜓᜋᜋᜈ᜔ ᜇᜑᜒᜎ᜔ ᜐ ᜊᜄᜓᜅ᜔ ᜍᜓᜎᜒᜆ᜶
Filipino-Latin: Puwede kang yumaman dahil sa bagong roleta.

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

What are these? These are called pangrams. A pangram is a sentence using every letter of the alphabet at least once. The most common pangram (in English) is: The quick brown fox jumps over the lazy dog.

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)
• Wikipedia: Pangram
• Wikipedia: List of pangrams

Except where otherwise noted, this content is
licensed under a Creative Commons License.