How to fix Internet Explorer 9 and 10 ignoring @font-face and font family?

Question

This is the CSS code of the font family (HelveticaNeueCond):

@font-face {
font-family: 'helveticaneuecond';
src: url('helveticaneuecond_bold_0-webfont.eot');
src: url('helveticaneuecond_bold_0-webfont.eot?#iefix') format('embedded-opentype'),
     url('helveticaneuecond_bold_0-webfont.woff2') format('woff2'),
     url('helveticaneuecond_bold_0-webfont.woff') format('woff'),
     url('helveticaneuecond_bold_0-webfont.ttf') format('truetype'),
     url('helveticaneuecond_bold_0-webfont.svg#helveticaneuecondbold') format('svg');
font-weight: bold;
font-style: normal; }

The other font variations (bold/italic, normal/italic, normal/normal) have been implemented the same way in stylesheet.css

This is how it's linked:

<link rel="stylesheet" href="webkit/stylesheet.css" type="text/css" charset="utf-8" />

This is how the font family is called:

body { font-family: 'HelveticaNeueCond', Tahoma, Arial, sans-serif; }

Now, it works perfectly fine in all new browsers, including Edge, IE11, all modern mobile browsers. It even works in most IE (even 8 and older). However, IE 9 and 10 simply ignore it. Even worse, they ignore the font family, using a serif font instead, even though I clearly stated "sans-serif", should everything fail.

The webfontkit has been generated with fontsquirrel.

How can this be fixed?

Just to make sure: you are aware that neither IE9 or IE10 are supported anymore? Microsoft hard-discontinued them years ago, they are no longer receiving updates of any kind, and the operating systems that support(ed) IE9/10 either now support Edge, or have also themselves been discontinued. Have your server test for the client's browser version, and serve a different CSS file for IE, so that they don't get all these formats (which you should stop using, too. Use woff/woff2 and use the eot format only for dead IE browsers) — Mike 'Pomax' Kamermans

Frank Conijn Frank Conijn · Accepted Answer · 2018-08-10T20:22:02

Have you tried font-family: 'HelveticaNeueCond'; in the @font-face? You don't have to change the font file names, but you should try changing the font's declared name in the @font-face. Or, of course, you could change the name in the body rule: body { font-family: 'helveticaneuecond', Tahoma, Arial, sans-serif; }. They should match, also in upper and lower cast.

How to fix Internet Explorer 9 and 10 ignoring @font-face and font family?

1 Answers