IE 8 rendering font-face normal as italic

Question

I have been pondering for quite some time on what causes some IE versions to render @font-face fonts as italic, even though the styles are declared as normal.

My main thought is that IE won't download every font-file before rendering the page.

In my CSS I have declared font files for different typefaces of the same font - ranging from thin italic to ultra. They are all declared using the same setup:

@font-face { /* THIN ITALIC */
    font-family: Unit;
    src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
    src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
         url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
    font-weight: 100;
    font-style: italic, oblique;
    font-variant: normal;
}

through

@font-face { /* ULTRA */
    font-family: Unit;
    src: url("../gfx/fonts/UnitWeb-Ultra.eot");
    src: url("../gfx/fonts/UnitWeb-Ultra.eot?#iefix") format("embedded-opentype"),
         url("../gfx/fonts/UnitWeb-Ultra.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
}

As you can see, italics are declared as font-style: italic, oblique;, while normal is declared as font-style: normal;.

Now, to the rendering.

This is how IE 9 renders it

This is how IE 8 renders it every now and then

Looks like what's described [here](http://stackoverflow.com/a/3795632/893780): IE8 will only use the first @font-face declaration for a given font family. — robertklep, Jan 11 '13 at 08:20
Ah, thanks for the link, robertklep! I'll try putting the normal declaration first to see if it will look somewhat descent :) — haabe, Jan 11 '13 at 08:25
It doesn't seem consistent, though, @robertklep. [IE 8 rendering normal as both normal and italic](http://ta-kundesenter.no/bilder/font_ie8_2.jpg) The italic rendering in this screendump has a different font-weight than those rendering as normal. — haabe, Jan 11 '13 at 08:32

score 2 · Answer 1 · edited May 23 '17 at 11:43

Posted as answer is this SO question: Custom font sometimes renders in italics in IE8 / IE7

You need to create a custom name for each of your @font-face font-family. e.g.

@font-face { /* THIN ITALIC */
   font-family: UnitItalic;
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
        url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
   font-weight: 100;
   font-style: italic, oblique;
   font-variant: normal;
}


@font-face { /* THIN ITALIC */
   font-family: UnitNormal;
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot")
   src: url("../gfx/fonts/UnitWeb-ThinIta.eot?#iefix") format("embedded-opentype"),
        url("../gfx/fonts/UnitWeb-ThinIta.woff") format("woff");
   font-weight: 100;
   font-style: italic, oblique;
   font-variant: normal;
}

IE 8 rendering font-face normal as italic

1 Answers1