Custom font is sometimes italicized in IE8 / IE7

Question

In IE7 and IE8, when using a custom web font, text is sometimes italicized, even when I explicitly set font-style: normal . The problem is sporadic - it will be processed several times, then I update, and everything is in italics, then I update and return to normal.

I use this @font-face declaration:

 @font-face { font-family: 'DIN'; src: url('fonts/DINWeb.eot'); src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), url('fonts/DINWeb.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DIN'; src: url('fonts/DINWeb-Bold.eot'); src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/DINWeb-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'DIN'; src: url('fonts/DINWeb-Ita.eot'); src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), url('fonts/DINWeb-Ita.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'DIN'; src: url('fonts/DINWeb-BoldIta.eot'); src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), url('fonts/DINWeb-BoldIta.woff') format('woff'); font-weight: bold; font-style: italic; } 

Theres a comment on in this article that indicates that it might be roughly the order of the @font-face declarations: however, the only thing that stopped the problem was that italics were removed altogether.

Another answer suggests using the Font Squirrel @ font-face font generator; I cannot do this, but the font files on the Internet that I use have DRM.

Is there a way to solve this problem without completely removing italic ads?

UPDATE:. Upon further investigation, it seems that this problem also affects IE8, and not just in compatibility mode.

Answer 1

For each of your @font-face font-family names, create your own name instead.

Example:

 @font-face { font-family: 'DINnormal'; src: url('fonts/DINWeb.eot'); src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), url('fonts/DINWeb.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'DINbold'; src: url('fonts/DINWeb-Bold.eot'); src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/DINWeb-Bold.woff') format('woff'); font-weight: bold; font-style: normal; } @font-face { font-family: 'DINitalic'; src: url('fonts/DINWeb-Ita.eot'); src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), url('fonts/DINWeb-Ita.woff') format('woff'); font-weight: normal; font-style: italic; } @font-face { font-family: 'DINboldItalic'; src: url('fonts/DINWeb-BoldIta.eot'); src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), url('fonts/DINWeb-BoldIta.woff') format('woff'); font-weight: bold; font-style: italic; } 

After these CSS rules are defined, you can include a specific CSS rule:

 li { font: 18px/27px 'DINnormal', Arial, sans-serif; } 

Answer 2

If, like me, you run into this issue while experiencing a similar problem with TypeKit fonts, this TypeKit blog entry explains how you can name unique font-family names for each weight and style of a TypeKit font to address it.

Answer 3

I had a similar problem, the web font showed up in Italic when using IE8 (emulator), after digging and digging. I came across an article suggesting that the emulator can sometimes be misleading, especially when it comes to webFonts, and that he suggested trying to use the site in real IE8, since I am using a Windows 7 machine, I could not load the real thing. so I used this site called http://www.browserstack.com/ (No testers or fake browsers. Test in real browsers, including Internet Explorer 6, 7, 8, 9, 10, and 11.)

and I noticed that my font is no longer in italics: D

Here is a link to the article I read,

http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/

Hope this helps you guys if I stumbled upon something like this when researching this would really save me in a few hours.