New @Font-Face Syntax: Simpler, Easier

Feb 7, 2011

I love it when a plan comes together.

Some months ago, in an an email exchange with Jeffrey Zeldman about the feasibility of a book about web fonts, I wrote that the turning point – the point at which enough would be known to establish best practices – would be around the time IE9 and Firefox 4 were released to market.

A Simple And Conformant Cross Browser Syntax

Now, with IE9 and FF4 nearing release, as if on cue, Ethan Dunham of Font Squirrel has revisited the problem of a cross-browser CSS @Font-Face syntax and found – a year and half after it first became an issue – a new and simpler solution. This was last Thursday.

Only on the web could change happen so fast. Knowledgeable eyeballs were on it immediately. And within hours of publication, it was tested and tweaked a few times. By the end of the day it was already being implemented at Font Squirrel, Font Spring, and Kernest, too.

It Comes In Two Flavors

Since one of the things I do like about the Mo’ Bulletproofer syntax is that, while the following is conformant:

     src: url('http://:/') format('no-ie-404')

it’s obviously odd and deliberately self-describing. Therefore it’s less likely to be left out once you’re in the habit of using it. And less likely to be deleted accidentally by someone unfamiliar with it’s purpose. So, the following is my version of the new syntax, in line with that practice. It’s the result of tests done with the IE9 Preview 7 build and many other desktop browsers and platforms over the weekend.

The Trick Is In The Question Mark

There are currently two variations. They are:

@font-face {
     font-family: 'fishyfont';
     src: url('fishyfont.eot?iefix') format('embedded-opentype'), 
	   url('fishyfont.woff') format('woff'), 
	   url('fishyfont.ttf')  format('truetype'),
	   url('fishyfont.svg#svgFontName') format('svg');
	}

With this variation, IE 6, 7, 8 and IE9 take the EOT file. But, of course, IE9 supports WOFF, too. So what if, for some reason, you want IE9 to take the WOFF file instead?

Follow The Bouncing Ball

Well, the ball that was set bouncing with Ethan’s original post on the Font Spring Blog bounced back again from Melbourne, Australia where Ryan Seddon of CSS Ninja posted a fix that overcomes this limitation:

@font-face {
     font-family: 'fishyfont';
     src: url('fishyfont.eot?iefix') format('ie9-skip-eot'), 
           url('fishyfont.woff') format('woff'),
           url('fishyfont.ttf') format('truetype'),
           url('fishyfont.svg#svgFontName') format('svg');
	}

With this variation, IE9 will not take the EOT. Instead it takes the next font in the stack that’s in a format that IE9 understands. In this case the WOFF file. If there was no WOFF file, it would take the TTF. (That is, as long as the TTF has the hidden embedding bit set to “Installable” – if Microsoft is still sticking to that. I’m not sure what IE9 does in that case, we’ll see.)

It’s Still Being Tested

There’s no such thing as too many tests or testers. If you find a problem, please report it on the Font Spring Blog. Or here.

I’ll be posting more as I test more and to explain how and why all this works and what problems it solves.

Update: Feb 17 2011

Alert: In some quick-and-dirty tests of this syntax in IE9 RC1, a problem came up. If the page kicks IE9 into a “less than” IE9 Compatibility Mode, this technique fails and the fallback font displays. The word from Microsoft’s IE team is that this behavior will not be altered for IE9 RTM.

[Let's get it over with: insert, mentally, your expletive of choice here and now, and then let's move on....]

What this means is that, as of right now, the most comprehensive, failure-proof method – one that avoids the bug in Android, the innate strangeness of the local() descriptor, and bridges the gap between IE6, 7, 8, and IE9 – is the Mo’ Bulletproofer @Font-Face Syntax. However! However! If you prefer a single declaration solution and your pages don’t trigger one of the IE9 Compatibility Modes, barring any more unforeseen changes between IE9 RC1 and IE9 RTM, the Fontspring syntax seems alive and well. The problem won’t come up. Note also, that you can near-totally prevent failure and ensure your pages are running in IE9 “Edge” mode by using the X-UA-Compatible Meta Tag.

Update: March 02 2011

Alert: More changes, but I think we are finally at the end. Maybe. Ethan Dunham has “hardened” the syntax by adding in the EOT-only src descriptor that was a part of Paul Irish’s Bulletproof Syntax. And it works in IE9′s compatibility modes, too. (I can’t see a downside. In fact, adding that first EOT-only src descriptor was Microsoft’s recommended approach to bridging the gap between IE 6, 7, and 8′s proprietary implementation and IE9′s standards-based implementation from the very start.)
So, the following now works universally:

@font-face {
	font-family: 'fishyfont';
	src: url('fishyfont.eot'); /* IE9 Compat Modes */
	src: url('fishyfont.eot?iefix') format('eot'), /* IE6-IE8 */
	     url('fishyfont.woff') format('woff'), /* Modern Browsers */
	     url('fishyfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('fishyfont.svg#svgFontName') format('svg'); /* Legacy iOS */
	}

Ralf Hermann is recommending it in an article on @font-face at Smashing Magazine.

Is it rock-solid? Looks like it. I would use it. But only IE9 RTM can seal the deal. Or not.
Stay tuned.

Sharing Options:

Leave a Comment

Previous post:

Next post: