How to make Google Fonts work in IE?

by

Looks like IE8-IE7 can’t understand multiple Google Web Font styles through the same file request using the link tags href.

These two links helped me figure this out:

  • See this open Google issue, and look at the comments.
  • Also see this StackOverlow Answer Google Web Fonts don’t work in
    IE8

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 href of the link tag:

So normally you would have this, declaring multiple font styles in the same request:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" />

But in IE7-IE8 add a IE conditional and specify each Google font style separately and it will work:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:700" /> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->

Hope this can help others!

Leave a Comment