Posted By

LeeRJohnson on 02/04/11


font typography font-face

Versions (?)

Who likes this?

3 people have marked this snippet as a favorite


The New Bulletproof @Font-Face Syntax

 / Published in: CSS


The hack that makes this work is the '#' following the EOT filename. Seriously. Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single hash mark. The hash fools IE into thinking the rest of the string is a URL fragment and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

  1. @font-face {
  2. font-family: 'MyFontFamily';
  3. src: url('myfont-webfont.eot#') format('embedded-opentype'),
  4. url('myfont-webfont.woff') format('woff'),
  5. url('myfont-webfont.ttf') format('truetype'),
  6. url('myfont-webfont.svg#webfontFqDaNIX6') format('svg');
  7. }

Report this snippet  

You need to login to post a comment.