CODEWITHSUNDEEP
htmlcss
Grant H.
Grant H.

Reputation: 3717

Why does my icon font not work in IE10 on Windows 8 only?

I'm using an icon font throughout a site I have been building, and just noticed that the font does not display in IE10 on Windows 8 only. The font works fine in IE10 on Windows 7, and in Chrome/FF across the board.

Worth noting that SOME fonts from this set DO work in IE10/Windows 8. E.g. '\2699' works, but '\E744' does NOT work in IE10/Windows 8.

UPDATE: Here is a JSFiddle that exhibits the issue: http://jsfiddle.net/wqs5C/

Can anyone help me understand why it may not be working?

Here is the font declaration: 

@font-face {
  font-family: 'icons';
  src: url("../Fonts/icons.eot");
  src: url("../Fonts/icons.eot?#iefix") format('embedded-opentype'), 
       url("../Fonts/icons.woff") format('woff'), 
       url("../Fonts/icons.ttf") format('truetype'), 
       url("../Fonts/icons.svg#icons") format('svg');
  font-weight: normal;

font-style: normal; }

Here is the style (in IE10 developer tools, these have a line through them):

.exp_closed > .widget-head > .toggle:after {

    content: '\E744';
    font-family: 'icons';
    font-size: 16px;

}

Upvotes: 3

Views: 1219

Answers (1)

Grant H.
Grant H.

Reputation: 3717

So I've ultimately traced this back to "Protected Mode" in IE10. It was preventing ALL icon fonts from working. As soon as I disabled it, everything started acting like I'd expect it to. The failures in FF on the JSFiddle are likely from cross-domain restrictions on font downloads.

Upvotes: 4

Related Questions