Soma Design

UPDATE: The syn­tax has already been improved to favour IE9 load­ing WOFF instead of EOT, thanks to some sleuthing by the CSS Ninja.
UPDATE 2: The syn­tax now uses a ? instead of a # because local IE requests choked on the #.

Ethan Dun­ham of Font Squir­rel and Fontspring fame has just released the defin­i­tive @font-face syn­tax. I’ve been hyp­ing it up on my Twit­ter account, but this is too good to restrict to my fol­low­ers there. The new syn­tax is clean, beau­ti­ful, and sim­ple. It looks like:

@font-face {
   font-family: 'MyFontFamily';
   src: url('myfont-webfont.eot?') format('eot'),
        url('myfont-webfont.woff') format('woff'),
        url('myfont-webfont.ttf')  format('truetype'),
        url('myfont-webfont.svg#svgFontName') format('svg');
}

Here’s the mag­ic he found:

The hack trick that makes this work is the ‘?’ fol­low­ing the EOT file­name. Seriously.

Just awe­some. Great work Ethan!