Testing IE9’s WOFF Support

IE9 offi­cial­ly sup­ports the new WOFF for­mat for embed­ding web­fonts. And there was much rejoic­ing. But, the ques­tion that’s been nag­ging away at me has been: how do we as web devel­op­ers account for IE’s lega­cy EOT for­mat while giv­ing pref­er­en­tial treat­ment to the emerg­ing WOFF standard?

The short answer is: keep using Paul Irish’s bul­let­proof smi­ley syn­tax. WOFF will be loaded by browsers that under­stand it, and lega­cy IE ver­sions (8 and under) will load EOT.

The long answer: every src dec­la­ra­tion with­in the @font-face block effec­tive­ly resets the CSS parser’s attempt to find the appro­pri­ate font file. The ren­der­ing engine will use the first viable font source in the last src dec­la­ra­tion inside each @font-face block. Paul Irish’s smi­ley syn­tax works per­fect­ly here, since the first src dec­la­ra­tion is only under­stood by IE < 9 (due to the EOT for­mat), while the sec­ond src dec­la­ra­tion is under­stood by >= IE9 and all oth­er good browsers.

This pro­duces a win-win sit­u­a­tion. Good browsers that aren’t IE ignore the first src dec­la­ra­tion because EOT is not viable to them. IE9 prefers the sec­ond src dec­la­ra­tion because it under­stands EOT.

I have a few test cas­es to view. They’re also avail­able on Github.

Tagged , , , , , | By Matt | Posted in Web Standards | Comments (4)

4 Comments

  1. Peter Chester
    Posted December 28, 2010 at 11:16 am | Permalink

    Thanks for the font insights Matt! I’ve been play­ing around with the font-face kits at http://fontsquirrel.com which appear to imple­ment the method­ol­o­gy you are describ­ing. They’ve been pret­ty solid.

  2. Ethan Dunham
    Posted December 28, 2010 at 6:04 pm | Permalink

    Thanks Matt for dig­ging into this. IE is final­ly matur­ing I guess.

  3. Paul Irish
    Posted December 29, 2010 at 11:53 am | Permalink

    Woot!

    I will con­cede there is one flaw in the bul­let­proof syntax.
    Android total­ly effs up and can’t han­dle the local() so it drops the whole dec­la­ra­tion. As a result no fonts are down­loaded and even tho the brows­er does indeed sup­port web­fonts, it does­n’t sup­port the bul­let­proof syntax.

    Per­son­al­ly, I think serv­ing web­fonts to mobile devices is a mis­take, espe­cial­ly until the FOUT/invisible text sit­u­a­tion is solved. The files are too damn large and pre­vent you from read­ing the body text for a long time.
    So I’m per­fect­ly fine with the Android bug. 🙂

  4. Matt
    Posted December 29, 2010 at 6:39 pm | Permalink

    @Ethan & @Peter You’re welcome!

    @Paul Ah, did­n’t know that about Android, good to know. I agree that in most cas­es mobile devices should­n’t get web­fonts, except maybe by using the Web­Font Loader to emu­late Fire­fox behav­iour, and only with WOFF/TTF, not SVG due to low­er sizes.