Search code examples
cssinternet-explorerwebfonts

IE11 @font-face fails when used in @media query

I am using the following fonts in IE11 (which are downloaded from MyFonts). When specified in the following manner they load perfectly:

@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 specified inside a media-query, the fonts do not load into IE11 (regardless of screen resolution). It just uses 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');}
}

Firefox and Chrome work perfectly. There are no other font-face rules specified anywhere, so its not an inheritance problem.

Is this a bug or am I doing something stupid?

The idea is to assume that portable devices have a slower connection (e.g. connecting when mobile) so we skip the custom font and go for a generic one in these cases.

Solution

  • After some additional research I've found the cause and solution.
    The cause is that:

    The @import rules in a style sheet must precede all rule sets. An @import rule that follows one or more rule sets will be ignored. Reference: SitePoint article

    Thankfully the solution is nice and simple. By removing the media query from the style sheet, and placing it within the HTML reference, I achieve both requirements and also remove an extra @import rule:

    <link rel="stylesheet" href="/css/fonts.css" media="(min-width:800px)" />