Internet Explorer 8 ignores font-weight in CSS

Question

So I'm having problems understand why IE is ignoring my CSS here. I have this code:

<h2>Har du stadsnät eller kan du få det?</h2>

I.e. nothing weird or anything. And here is the resulting rendering:

But here is the CSS code for this HTML:

.rubrik, h2 {
  font-family: Lato;
  font-size: 32px;
  font-weight: normal;
  line-height: 38px;
  font-variant: normal;
  font-style: normal;
  color: #969696; 
}

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)

So, using the included developer tools of Internet Explorer 8, I inspect the CSS interpretation, and that looks like this:

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:

@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;
}

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

Solution

I think you need to change the name of the font-family: Lato; on each fontface property, as IE is possibly getting confused. Instead try putting font-family: Lato-bold;, font-family: Lato-italic etc. Also, if the font has a bold face (like Lato does and you have referenced in the fontface properties) then you do not need to add font-weight: bold; for a fontface property, as the font is already bold and adding the font-weight will just add faux-bold and make it look bad.

This means that for your h2, you only need to put font-family: Lato; if you want it to be the normal, non-bold version.

Comments

[Sandman]

Indeed I have, this does not include it in the interpretation either, nor change the rendering, unfortunately.

[Sandman]

BUt surely that is in violation of the font-face specification. How would you get bold inline if so? Then I would have to specifically set B and STRONG to font-family: Lato-Bold if the bold state of Lato is not specified?

[Jukka K. Korpela]

An explicit declaration cannot be overridden by inheritance; that’s part of the concept of CSS inheritance.

[Tom Oakley]

Yeah, set b and strong to have a font-family of Lato-bold. If you just set it with font-weight: bold; then you will get double bold (font's uniquely designed bold, and the browser faux-bold) which won't look very good. I also usually set h1, h2, h3 etc to be font-family: Lato-bold; as well when using font-face. This shouldn't be too much of a problem for support/compabilityly, as @font-face is supported by IE6, and most versions of other browsers too: caniuse.com/#feat=fontface