css - 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!