How does ?#iefix solve web fonts loading in IE6-IE8?
CssInternet ExplorerWebfontsCss Problem Overview
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.
Css Solutions
Solution 1 - Css
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 ...
Solution 2 - Css
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 */
}
Solution 3 - Css
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.
Solution 4 - Css
The ?#iefix is there to stop the browser interpreting any characters after the ? as a query string and therefore prevents another possible server error.