[How-To] Implement Cross-Browser @font-face Support

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.

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

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.

The @font-face Smiley variation

src: local('☺')

The above technique prevents your visitor’s browser in using any locally installed fonts. By doing this, you can be sure that your own font is the actual file the browser is rendering. This usually becomes a problem when there are [1] fonts with the same name; or [2] there are updates to the font that more likely is not installed on your visitor’s machine. You can read more about it here.

@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. At the same time, browser vendors will like it because it is not Microsoft (note: okay that is not the reason… I actually can not remember the real reason why they do not want EOT :p ).

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.

Chrome(WebKit)

Firefox(Gecko)

IE(Trident)

Opera(Presto)

Safari(WebKit)

EOT

No

No

v4.0

No

No

OTF

No

v3.5

No

v10.0

v3.1

SVG

v0.3

No

No

v10.0

v3.1

TTF

v2.0

v3.5

No

v10.0

v3.1

WOFF

v5.0

v3.6

v9.0

No

No

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.)

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. Which is written in:

Is a self-confessed bibliophile and technophile other than being an early adopter, an avid gamer, a geek, nerd, role-player, anime otaku, and trekker.

His first online project was in 1998 when he launched the unofficial website for Ansalon MUD (a text-based, telnet online game) and his own community forums Laibcoms.Community. By 2003 he created his work blog GM-Yukino which grew into gameshogun™, Snoworld™, and techmagus™ over the years.

Leave a Reply

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)