After implementing an icon font across my website, I have encountered an issue where the font does not display in IE10 on Windows 8. Interestingly, the font works perfectly fine in IE10 on Windows 7 as well as in Chrome and Firefox on all platforms.
It is worth noting that while some fonts from this set do work in IE10/Windows 8 (like '\2699'), others do not (such as '\E744').
UPDATE: I have created a JSFiddle to demonstrate the problem: http://jsfiddle.net/wqs5C/
I am seeking assistance in understanding why the font might not be working in this specific scenario.
Below is the font declaration being used:
@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;
}The following style is causing issues in IE10 (as indicated by strike-throughs in developer tools):
.exp_closed > .widget-head > .toggle:after {
content: '\E744';
font-family: 'icons';
font-size: 16px;
}