How Does #Iefix Solve Web Fonts Loading in IE6-IE8

How does ?#iefix solve web fonts loading in IE6-IE8?

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

IE8 @font-face is not working when define not only eot

You need a hash, usually ?#iefix for convention, on the eot that appears in the multiple src list.
This explains why:
How does ?#iefix solve web fonts loading in IE6-IE8?

@font-face {
    font-family: 'CalibriRegular';
    src: url('fonts/calibri.eot');
    src: url('fonts/calibri.eot?#iefix') format('embedded-opentype'),
         url('fonts/calibri.woff') format('woff'),
         url('fonts/calibri.ttf') format('truetype'),
         url('fonts/calibri.svg#CalibriRegular') format('svg');
}

Why is IE8 not loading my eot files?

Thanks for all the help. It looks like the problem was the font converter. The eot file was not being recognized as valid by IE. Thanks to "Joel Eckroth" for suggesting I try other converters.

@font-face does not work @IE8 and lower

You didn't list the eot file twice for the iefix. Try it like this-

@font-face {
font-family: 'Minion';
    src: url('Webfonts/minion-regular.eot');
    src: url('Webfonts/minion-regular.eot?#iefix') format('embedded-opentype'),
         url('Webfonts/minion-regular.woff') format('woff'),
         url('Webfonts/minion-regular.ttf') format('truetype'),
         url('Webfonts/minion-regular.svg#minion-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Font-Face not working in IE or Edge

If anyone stumbles across this post, I ended up just using a more web-friendly font.

Make sure your @font-face rules are NOT contained in media queries. @font-face rules contained in media queries do not work in IE, Edge, but work in every other modern browser I tested on.

Serving hosted EOT font for IE

It is possible to host your fonts on a different domain, but you're going to have to deal with any cross-origin policy issues if they arise. Check your Developer Tools in IE (hit F12 in IE8 or IE9) and look at the console to find any errors (cross-origin policy errors will be displayed there). For more details about correcting the cross-origin policy headers, see IE9 blocks download of cross-origin web font.

---

Related Topics