Search code examples
htmlinternet-explorergoogle-webfonts

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?


Solution

  • 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.