How to make Google Fonts work in IE?

Question

I've been developing a site that uses the Google Fonts API. It's great, and supposedly has been tested in IE, but when testing in IE 8 the fonts simply don't get styled.

I included the font, as Google instructs, thus:

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light"    rel="stylesheet" type="text/css" /> 

and added its name to the front of a font family in CSS thus:

body { font-family: "Josefin Sans Std Light", "Times New Roman", Times, serif; font-size: 16px; overflow-y: scroll; overflow-x: hidden; color: #05121F; } 

Works like a charm in Chrome, Firefox, Safari. No dice in IE 8. Anybody know why?

Answer 1

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!