27

I have a question about css @font-face. I'm using the following code from this website (http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax).

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

Why does the line "url('myfont-webfont.eot?#iefix')" have "#iefix" at the end?

Shrey Gupta
  • 5,509
  • 8
  • 45
  • 71
12japerk
  • 389
  • 1
  • 3
  • 8

1 Answers1

58

It's because of the way IE8 and below interpret font declarations. The normal url('myfont-webfont.eot') would lead to 404 Server errors in these versions of IE; adding the ?#iefix fixes the server issues. (It's for the same reason there's conditional stylesheets for IE.)

According to Fontspring (straight from the source):

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 question mark. The question mark fools IE into thinking the rest of the string is a query string 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.

So the part that's necessary is the ?; I imagine the #iefix is just a semantic line for programmers that isn't interpreted by the browser in any particular way.

Here's some more information if you would like: https://github.com/stubbornella/csslint/wiki/Bulletproof-font-face.

Shrey Gupta
  • 5,509
  • 8
  • 45
  • 71
  • 1
    Thanks. This helped clear some stuff up. – 12japerk Jan 08 '13 at 02:50
  • 2
    If you use `#iefix` after the `?`, you end the querystring and start the [URL fragment](http://en.wikipedia.org/wiki/Fragment_identifier). I don't know if it was intended, but it could potentially avoid an issue with the remaining `url`s hitting any [browser/server querystring limitations](http://stackoverflow.com/questions/812925/what-is-the-maximum-possible-length-of-a-query-string). – patridge Jan 31 '13 at 19:42
  • 1
    Interesting. Upboated! – aendra Jun 28 '13 at 15:45
  • For developers requiring, a cache buster strategy, using a rewrite rule or filename change are the only options, as `file.eot?v1` will not work.. – gbakernet Feb 20 '14 at 01:22
  • Looking at the behavior of Font Awesome's css, it seems like newer IEs are still following the same parsing rules. With Fiddler, I see IE 11 dropping into the ../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0 rule while Chrome and Firefox avoid it. – user1664043 May 31 '17 at 16:04