CODEWITHSUNDEEP
htmlcssinternet-explorer-9font-facemedia-queries
Graham Conzett
Graham Conzett

Reputation: 8454

@font-face behavior inconsistencies inside of @media query rules (IE9)

The current behavior in Chrome, Firefox and Safari when it comes to media queries and resources is to not load the resource until you need it; e.g. a mobile device with a 480px resolution will not load images inside of max-device-width: 1000px rule. Naturally this is great for keeping weighty desktop resources away from mobile devices.

I am running into inconsistencies with this approach when it comes to loading font resources. The following will load the web font for all browsers listed above EXCEPT IE9 

@media screen and (max-device-width: 1000px) {
    @font-face{ 
        font-family: 'SomeFont';
        src: url('../Fonts/somefont.eot');
        /* full stack here etc. */
    }
}

This is annoying because I want to keep a large typeface away from mobile, but IE9 will not load the font unless it is outside a media query.

Is this the correct behavior? I can't find anything about font resources specifically in the spec, so it could be that IE9 is doing it correctly (even though this is not my desired behavior). Can anyone shed any light on this?

Upvotes: 4

Views: 640

Answers (3)

Aurelio De Rosa
Aurelio De Rosa

Reputation: 22152

Although old, my answer can help other users with the same problem. I wrote an article on how to solve this issue that can be read here.

Basically, you can use a conditional comment plus a JavaScript based solution because IE10 ignore conditional comments.

Upvotes: 0

albert
albert

Reputation: 8153

so why don't you just wrap the ie9 specific @font-face declaration in conditional comments? either that or re-declare @font-face for mobile. i'm assuming that by "mobile" you mean IEMobile? you can target IEMobile via condtional comments as well, so you could do it either way.

<!--[if IE 9]><style> @font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); } ;</style><![endif]--> @media screen and (max-device-width: 1000px) { @font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); } }

Upvotes: 0

Knu
Knu

Reputation: 15136

Here's why: "At-rules inside @media are invalid in CSS2.1".
Firefox seems to respect the specification as well.

Upvotes: 3

Related Questions