Custom font sometimes renders in italics in IE8 / IE7

Question

In IE7 and IE8, when using a custom web font, text is sometimes rendered in italics, even when I explicitly set font-style: normal. The issue is sporadic - it will render fine a few times, then I refresh and everything is in italics, then I refresh and it's back to normal.

I'm using 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 this article that indicates it could be about the order of the @font-face declarations: however the only thing that stopped the problem was removing the italic declarations altogether.

Another Stack Overflow answer suggests using the Font Squirrel @font-face generator; I'm not able to do this however as the web font files I'm using have DRM.

Is there a way to solve this without completely removing the italic declarations?

UPDATE: Upon further investigation, it seems this issue affects IE8 as well, not just in compatibility mode.

Stheno

You did not provide your HTML that's in use. Try to use unique @font-face family names. Example: DINnormal, DINbold, DINitalic, DINboldItalic. View CSS and HTML example in this SO Answer. If creating unique names solves your issue, I will make an Answer. Cheers! – Pforzheim

@Pforzheim thanks, turns out unique font family names did end up solving the problem. If you write up an answer I'll go ahead and accept it. – Stheno

Adam Sharp, glad that works out for you... I've posted an answer. Cheers! – Pforzheim

Answer 1

For each of your @font-face font-family names, create a custom 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 those CSS rules are defined, then you can include specific CSS rule:

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

Pforzheim

Answer 2

If, like me, you came across this question while experiencing a similar issue using TypeKit fonts, this entry from the TypeKit blog explains how you can force unique font-family names for each weight & style of a TypeKit font to address it.

Lectern

I can second this. I came across this comment and it helped me fix the issues i was having whilst using Typekit. Thanks man. – Chicalote

Answer 3

I was having a similar issue, web font was showing in Italic when using IE8(Emulator), after digging and digging I came across a article that suggest emulator can sometimes be misleading especially when it comes to webFonts, and what it suggested was trying the site in the actual IE8, as I am using a windows 7 machine i wasn't able to download 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 my font was not italic anymore :D

Here's the 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 came across something like this when researching it really would have saved me a few hours

Inofficious