The Definitive @font-face Syntax

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


  1. Posted February 18, 2011 at 2:45 am | Permalink

    Thanks for your trick. It’s so cool for use font on web­site.
    I will study to take it now.
    Thank you.

  2. Posted May 31, 2014 at 9:23 am | Permalink

    They might be the yelling fans or the silent admir­ers, but
    in adopt­ing that fash­ion trends, they feel to have belong to
    the same group. Besides, you can also avoid the rush of peo­ple in choos­ing the best of trin­kets
    at local shops and unusual price bar­gains– one
    can eas­ily get the attrac­tively unique fash­ion jew­els at home at amaz­ingly
    rea­son­able prices com­pared to the con­ven­tional shops.

    They rely on more 140 sup­pli­ers world­wide, with each region spe­cial­iz­ing in a cer­tain type of cloth­ing that it can man­u­fac­ture
    at a com­pet­i­tive price.

Post a Comment

Your email is never published nor shared. Required fields are marked *