@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 res

Solution 1:

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

Solution 2:

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

Solution 3:

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.