In my IE11 browser, I am utilizing fonts downloaded from MyFonts. When I specify them as shown below, they load without any issues:
@import url("//hello.myfonts.net/count/myFId");
@font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url('webfonts/myFId_0_0.eot');src: url('webfonts/myFId_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_0_0.woff') format('woff'), url('webfonts/myFId_0_0.ttf') format('truetype');}
@font-face {font-family: 'HelveticaNeueLTStd-Hv'; src: url('webfonts/myFId_1_0.eot');src: url('webfonts/myFId_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_1_0.woff') format('woff'), url('webfonts/myFId_1_0.ttf') format('truetype');}
However, when I try to include these fonts within a media-query, they fail to load in IE11 (irrespective of the screen resolution), defaulting to Times New Roman instead.
@import url("//hello.myfonts.net/count/myFId");
@media all and (min-width:800px) {
@font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url('webfonts/myFId_0_0.eot');src: url('webfonts/myFId_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_0_0.woff') format('woff'), url('webfonts/myFId_0_0.ttf') format('truetype');}
@font-face {font-family: 'HelveticaNeueLTStd-Hv'; src: url('webfonts/myFId_1_0.eot');src: url('webfonts/myFId_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_1_0.woff') format('woff'), url('webfonts/myFId_1_0.ttf') format('truetype');}
}
Interestingly, Firefox and Chrome display the fonts correctly. I have confirmed that there are no conflicting font-face rules anywhere else, ruling out an inheritance issue.
Could this be a bug or am I overlooking something obvious?
The intention behind this setup is to cater for devices with slower connections, such as mobile devices, by switching to a more common font in those cases.