Home/ Questions/Q 7412321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T06:31:21+00:00

I’ve made this example as simple as possible: <!DOCTYPE html> <html> <head> <title>Test</title> <link

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0