74

Lots of articles in the web like this : http://www.fontspring.com/blog/fixing-ie9-font-face-problems suggest to add a ?#iefixto the eot url. I was curious to know how is this going to solve the problem. Thanks.

vine'th
  • 4,890
  • 2
  • 27
  • 27

4 Answers4

87

IE8 and the older have a bug in their parsers for the src attribute. So if you include more than 1 font format in the SRC, IE fails to load it and reports a 404 error.
The question mark solves that problem as it fools IE into thinking the rest of the string (other src) is a query string, and therefore loading just the EOT file...
Other browsers will follow the specification and load just their required font type ...
You may wanna read Paul Irish's Bulletproof @font-face syntax to know more about some other of the why's ...

Rexy Hoang
  • 886
  • 7
  • 7
  • 4
    this does not answer for the additional hash tag ( ?# ). there is a hunch about it in the original question's link, but it's vague. – commonpike Jun 05 '12 at 11:42
  • It's not vague at all: In some rare cases, IE will fail because the @font-face declaration has too many characters. This can be solved in most instances by adding a ‘#’ hash mark after the ‘?’ question mark. This buys you a bit of extra room...It's only vague why it buys extra room. – DrCord Nov 21 '13 at 16:36
  • Note that sometimes .eot font won't work in IE8 even with this fix (although font will work in IE9+). Try using another ttf to eot converter if you have this problem. – cakan Mar 31 '15 at 20:33
23

You could do anything instead of ?#iefix: The basic objective is to put a ?#somethingafter the first font file in the URL as @Rexyz has already answered. 

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#FooAnything') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
basarat
  • 261,912
  • 58
  • 460
  • 511
4

Fully realising this is an old question.

But for those who came here looking for what version of "that" browser needed this hack, it's safe now to remove if you don't support IE<10.

So just get rid of it and have just one line enumerating all fonts in all formats you offer.

3

The ?#iefix is there to stop the browser interpreting any characters after the ? as a query string and therefore prevents another possible server error.

atwright147
  • 3,694
  • 4
  • 31
  • 57
  • Do you mean it stops the server interpreting any characters after ? as a query string. – Mark Fisher Jul 26 '19 at 12:27
  • It prevents any query string from getting appended to the end of the url (because the question mark is immediately followed by a hash string). Any extra question marks which might get added to the end of the url, after the hash, will just be treated as part of the hash. @Rexy Hoang's answer is a more useful answer :) – atwright147 Jul 28 '19 at 10:10