Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Looks like IE8-IE7 can't understand multiple Google Web Font styles through the <strong>same file request</strong> using the <code>link</code> tags <code>href</code>. </p> <p>These two links helped me figure this out:</p> <ul> <li>See this <a href="http://code.google.com/p/googlefontdirectory/issues/detail?id=9" rel="nofollow noreferrer">open Google issue</a>, and look at the comments. </li> <li>Also see this StackOverlow Answer <a href="https://stackoverflow.com/questions/9050747/google-web-fonts-dont-work-in-ie8">Google Web Fonts don't work in IE8</a></li> </ul> <p>The only way I have gotten it to work in IE7-IE8 is to only have one Google Web Font request. And only have one font style in the <code>href</code> of the <code>link</code> tag:</p> <p>So normally you would have this, declaring multiple font styles in the same request:</p> <pre><code>&lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" /&gt; </code></pre> <p>But in IE7-IE8 add a IE conditional and specify each Google font style <strong>separately</strong> and it will work:</p> <pre><code>&lt;!--[if lte IE 8]&gt; &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /&gt; &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /&gt; &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" /&gt; &lt;![endif]--&gt; </code></pre> <p>Hope this can help others!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload