Best Practice For @Font-Face CSS Takes A Turn

Jan 31, 2011

“Bulletproof ” is out, and “Mo’ Bulletproofer” is in.

In the last few days, major players on the web fonts scene – Kernest and Font Squirrel – have moved from Paul Irish’s Bulletproof @Font-Face syntax to Richard Fink’s Mo’ Bulletproofer syntax as the default.

Ethan Dunham, the developer behind Font Squirrel and Fontspring says:

Mo’ Bulletproofer is the only syntax that works across browsers including Android.
IE and Android both have buggy implementations and this format works around both of them.

Since I’m Richard Fink and this could just be my ego talking, here’s why Mo’ Bulletproofer is best practice going forward…

The Android local() Bug

Android has a bug that’s triggered by using the local() descriptor inside the @font-face declaration.

To clarify, the following non-standard code does not work on Android as it does in IE 6-8:

@font-face {
  font-family: 'somefont';
  src: url(somefont.eot);
  /* IE takes this font, Android doesn't. */
  src: local('3ix90a'), url(somefont.ttf) format('truetype');
  /* Android chokes on the local() descriptor and
    discards the entire @font-face declaration.
    No web fonts show up. */

Unlike IE, Android doesn’t “look back” and take the font specified in the initial url reference.
This makes the “Bulletproof ” syntax unusable on Android.
The problem is described in a bug report filed by Google’s Paul Irish, originator of “Bulletproof ”.
It also includes this FYI:

This bug has also caused a workaround from the Google Font API team:
As a result they sniff and change the CSS they serve to Android 2.2 devices.

Android Is Too Big For This Problem To Go Ignored

There isn’t much choice here. Mo’ really is more bulletproof. Even if the Android problem didn’t exist, there are other solid reasons for using Mo’ , but Android is the kicker.
How big is the Android market? Well, in 2010 Android emerged as the single best selling mobile platform in the United States.
Andy Rubin, former Android CEO and current VP of Engineering at Google, reports that 300,000 Android devices are being activated every day.

Bulletproof Reported As Problematical On Linux, Too

Last week there was a pingback here at RW from WordPress developer Aaron James Young saying:

I use the Mo’ Bulletproof @font-face syntax, which I’ve found to have the best cross-browser compatibility.

Young spent considerable time hands-on, testing Linux based browsers, before coming to this conclusion.
(It seems GTK-Webkit and Konqueror also have problems with local()).

Don’t Use local() At All

The bottom line is that using local() at all is a bad practice. In Google Fonts Failing for Internet Explorer Users I wrote:

See Jonathan Snook’s post here, and this Typophile thread here for an in-depth explanation of why the local() descriptor should not be used to specify a locally installed font except in very special circumstances.

I now take part of that back: in the absence of being able to specify and query for a unique font version ID – as a matter of defensive coding – I can’t imagine a plausible scenario where using local() isn’t, in some way, asking for trouble.

Here’s the original post on Mo’ Bulletproofer. To be updated soon, after the next Beta of IE9 arrives for testing.

Update – Feb 3, 2011

Paul Irish has chimed in on this issue in the comments. See his roundup on full view, with web fonts, on this test page. Paul is reporting that IE9 downloads both the EOT file and the WOFF file using Mo’ Bulletproofer. His tests were performed in Platform Preview 7. Is it a bug or a flaw in Mo’ Bulletproofer that calls for the addition of Conditional Comments? (That would fix the problem and it’s likely that the page would already contain the necessary “less than” IE9 Conditional Comment tags, anyway.) Also, in yet a new turn, Ethan Dunham of Font Squirrel has chimed in with yet another syntax that looks quite promising. And clever, damn him. Stay tuned. Rumor has it that IE9 RC1 (or will it be an RTM?) is due out in just a few days. Will go hands-on with testing then.

Sharing Options:

Leave a Comment

Previous post:

Next post: