CODEWITHSUNDEEP
cssinternet-explorerwebfonts
EvilDr
EvilDr

Reputation: 9632

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.

Upvotes: 1

Views: 971

Answers (2)

EvilDr
EvilDr

Reputation: 9632

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)" />

Upvotes: 2

Paulo Griiettner
Paulo Griiettner

Reputation: 1115

I would suggest a different approach... instead of specify the font inside a media query, I would just call the font inside the media query... I believe this issue is valid, since fonts should be global and than you just call the fonts when ever is needed... 

@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');}

@media all and (min-width:800px) {
    div {
        font-family: 'HelveticaNeueLTStd-Lt';
    }
}

Upvotes: 1

Related Questions