CODEWITHSUNDEEP
htmlinternet-explorergoogle-webfonts
Darrrrrren
Darrrrrren

Reputation: 6078

When using google web font with multiple weights, IE6-8 get confused

I've made this example as simple as possible:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,800" 
        rel="stylesheet" type="text/css">
  <style type="text/css">
    h1 {
      font-family: "Open Sans";
      font-weight: 800;
    }
  </style>
</head>

<body>
  <h1>Testing h1</h1>
</body>

</html>

Right now in IE6-8, the H1 tag will display as something other than 300 or 800 ... it looks like a 600. If I remove the 800, it displays correctly as 300. And if I remove the 300 and keep the 800, it displays correctly as 800. Can anyone else replicate this and explain how IE is displaying a font-weight that I haven't even pulled in?

Upvotes: 2

Views: 2995

Answers (2)

Laurence Lord
Laurence Lord

Reputation: 92

According to this article on Adobe TypeKit IE6-8 have trouble loading all the different font varients that make up a particular webfont: http://help.typekit.com/customer/portal/articles/6855

It's worth noting that TypeKit and Google Fonts are related through Font Loader (see here: https://developers.google.com/fonts/docs/webfont_loader.) However, while Adobe TypeKit have offered a solution for the IE font variants problem it doesn't seem to be available through Google Fonts.

The TypeKit method is to explicitly declare a font-family for each font weight and style.

e.g.

.light {
  font-family: "proxima-nova-n3", "proxima-nova", sans-serif;
  font-style: normal;
  font-weight: 300;
}
.thin-italic {
  font-family: "proxima-nova-i1", "proxima-nova", sans-serif;
  font-style: italic;
  font-weight: 100;
}

This seems to follow a conversion that is to suffix the font's name with a letter for the font style (n for normal, i for italic) and a number for the weight (1 for 100, 6 for 600). I've tried this for a Google Font but sadly it doesn't work.

Upvotes: 2

Darrrrrren
Darrrrrren

Reputation: 6078

Sorry to answer my own question, but I have a solution.

I ended up leaving JUST the 300 weight in the link tag. For the 800, I grabbed the content referred from the URL (an @font-face declaration), pasted it into my CSS file and renamed the font-family to something other than Open Sans (Open Sans Bold) ... changed my h1 font-family to the different name and BAM, correctly formatted font-weights in all major browsers.

Additionally, you can just download the .woff font provided by the google web-font embed and create a kit over at FontSquirrel.

Upvotes: 4

Related Questions