Geek Answers Handbook

IE 8 font-face rendering normal as italics

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

My main idea is that IE will not load every font file until the page is displayed.

In my CSS, I declared font files for different fonts of the same font - from thin italics to ultra. All of them are declared using the same setting:

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

across

 @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; , and the normal is declared as font-style: normal; .

Now, to the rendering.

This is how IE 9 displays it

This is how IE 8 does it from time to time.

+4
source share
1 answer

Posted as an answer, this question is SO: Custom font is sometimes italicized in IE8 / IE7

You need to create a custom name for each of your @ font-face fonts. eg.

 @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; }
+2
source

More articles:


All Articles