Conflict with respond.js on IE8

Hi all,

One of our requirements is to provide IE8 support on the multitude of websites we develop. One of these was a stock D7 build with a mass of complex functionality to it - there are somewhere in the region of thirty contributed modules in play at the moment. We're stress-testing on a massive scale at the moment, and noticed that respond.js quite simply doesn't work with Internet Explorer 8 when you bring the Flickr module into the mix.

I have understood why this is - in flickr.css, there is a call to a font-face within a media query. This is something respond.js absolutely hates - it doesn't render improperly, we're not talking about graceful degradation. IE8 goes into a 'perma loading' state, and crashes.

It's easy for me to barge in here and shout loudly about broken stuff, so what's my solution? Here's the offending theming:

@media screen {
  @font-face {
    font-family: 'CC-ICONS';
    font-style: normal;
    font-weight: normal;
    src: url('http://mirrors.creativecommons.org/presskit/cc-icons.ttf') format('truetype');
  }

https://github.com/scottjehl/Respond#support--caveats (fifth from the bottom of this list)

So what do we do now? The first question I have is, is this font call necessary within a media query? Can it be taken out of there at the very least?

I submitted this issue as a bug report rather than a feature request because every single one of us should be striving for cross-browser accuracy (within reason) and to provide as close to a perfect experience as possible for our clients/end users. Even if IE8 is stuck at around 2-5% of your end users, that's still a number you should try to appease. If you proceed to work on sites for the public sector (with the given of dated technology) then that number may sharply increase. Respond.js is an absolute staple of our projects, and it probably should be for you too.