Question

So IE9 spits out an error on using a google fonts include like the following:

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />

IE9 spits out an error, even though the fonts still load fine:

CSS3111: @font-face encountered unknown error. 

I’d gladly ignore this error if I weren’t writing content that is iframed on other people’s webpages. 🙁

Hosting the EOT files locally resolves the issue for IE:

< !--[if IE 9]>
< link rel="stylesheet" href="/survey/css/lato-ie.css" type="text/css" />
< ![endif]-->

And in that file..

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    src: url("/Lato-Reg-webfont.eot") format("embedded-opentype");
}
@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 900;
    src: url("/Lato-Bla-webfont.eot") format("embedded-opentype");
}

Include it in IE9, error’s gone, works great.

Now my problem is, I need to include the google font stylesheet for everyone but IE9. For example, I can’t do:

< !--[if !IE 9]>
< link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />
< ![endif]-->

Or firefox won’t even see the damn include.

Are IE’s devs conspiring to waste all of our time?

Answer 1

You were on the right track, you just need to use a downlevel-revealed conditional comment: it will hide it from IE but will be picked up by other browsers.