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

Question

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?

Answer 1

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