font-weight: bold with @font-face not working in IE9

Question

I'm using @font-face to define my own font:

@font-face{ 
    font-family: HelveticaNeue;
    src: url('fonts/helvlight_regular-webfont.eot');
    src: local("☺");
    src: url('fonts/helvlight_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helvlight_regular-webfont.woff') format('woff'),
         url('fonts/helvlight_regular-webfont.ttf') format('truetype'),
         url('fonts/helvlight_regular-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{ 
    font-family: HelveticaNeue;
    src: url('fonts/helvlight_bold-webfont.eot');
    src: local("☺");
    src: url('fonts/helvlight_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helvlight_bold-webfont.woff') format('woff'),
         url('fonts/helvetica_bold-webfont.ttf') format('truetype'),
         url('fonts/helvlight_bold-webfont.svg#webfont') format('svg');
    font-weight: bold;
    font-style: normal;
}

font-face rules was generated on Font Squirrel and afterwards I added font-weight and font-style rules. I use my custom font in CSS like this:

body {
    font: 16px HelveticaNeue, Verdana, sans-serif;
    color: black;
}

h1 {
    font-weight: bold;
    font-size: 2em;
}

and it works fine in Chrome, Firefox, Opera and Safari but it doesn't work in Internet Explorer.

I tried this @font-face works in IE8 but not IE9 to no success.

I also tried to change font-face name of bold style to HelveticaNeueBold and use it like:

h1 {
    font-family: HelveticaNeueBold;
    font-size: 2em;
}

and it works but this is not what I want of course. Also adding !important after bold didn't help. Any suggestions what I'm doing wrong?

Personnaly, I always use a different name for different font-weight. Why don't you want to do like that if it works ? :D — Djouuuuh
@KaijuJu I't looks ugly and it defeats the purpose of font-weight. But it seems I don't have any other alternative, do I? — Dread Boy
I'm not pro enough with CSS font-face properties but it seems to be the most common solution. Sorry :( — Djouuuuh

Lost Left Stack Lost Left Stack · Accepted Answer · 2013-08-08T14:16:24

IE doesn't support using a different font-weight than was specified in a @font-face rule.

You can read more about this here: @font-face IE9 font-weight doesn't work

font-weight: bold with @font-face not working in IE9

1 Answers