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

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

@font-face {
    font-family: 'BaybayinLopezRegular';
    src: url('baylopez-webfont.eot');
    src: local('☺'),
            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.

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

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

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

Filipino-Latin: Ang mabilis na kayumangging soro ay tinalunan ang tatamad-tamad na aso.

Enjoy!


 

Sources:


Share and Enjoy

  • Google Plus
  • Facebook
  • Twitter
  • StumbleUpon
  • Tumblr