title: Internet Explorer 8 ignores font-weight in CSS
body: <p>So I'm having problems understand why IE is ignoring my CSS here. I have this code:</p>
  
  <pre><code>&lt;h2&gt;Har du stadsnät eller kan du få det?&lt;/h2&gt;
  </code></pre>
  
  <p>I.e. nothing weird or anything. 
  And here is the resulting rendering:</p>
  
  <p><img src="https://i.stack.imgur.com/UMyiZ.png" alt="Rendering of HTML"></p>
  
  <p>But here is the CSS code for this HTML:</p>
  
  <pre><code>.rubrik, h2 {
    font-family: Lato;
    font-size: 32px;
    font-weight: normal;
    line-height: 38px;
    font-variant: normal;
    font-style: normal;
    color: #969696; 
  }
  </code></pre>
  
  <p>Which clearly states that the H2 should have "normal" as font weight, yet the rendered text is clearly bold, here is a correct rendering (from Safari)</p>
  
  <p><img src="https://i.stack.imgur.com/j5Cua.png" alt="Correct rendering"></p>
  
  <p>So, using the included developer tools of Internet Explorer 8, I inspect the CSS interpretation, and that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/lrB6D.png" alt="CSS interpretation"></p>
  
  <p>As I understand it, what I am looking at here is IE8's interpretation of my CSS, and suspiciously missing is the "normal" attribute. IE has converted the CSS to the one-line version of "font" but didn't include the "normal" part. Now, the font "Lato" is a font-face font, and the font-face CSS is here:</p>
  
  <pre><code>@font-face {
      font-family: Lato;
      src: url('/media/fonts/Lato.eot');
      src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
  }
  @font-face {
      font-family: Lato;
      src: url('/media/fonts/Lato-Bold.eot');
      src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
      font-weight: bold;
  }
  @font-face {
      font-family: Lato;
      src: url('/media/fonts/Lato-Bold-Italic.eot');
      src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
      font-weight: bold;
      font-style: italic;
  }
  @font-face {
      font-family: Lato;
      src: url('/media/fonts/Lato-Italic.eot');
      src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
      font-style: italic;
  }
  </code></pre>
  
  <p>Even when specifying "normal" in the font-face declaration for font-weight, it doesn't work. So I'm stuck here, trying to figure out what I am doing wrong not to have IE include "font-weight: normal" in the declaration for H2... Any guesses? Thanks in advance...</p>