I know there are lots of similar questions but this situation seems really odd. @font-face seems to be broken for Internet Explorer 11 (Windows 7 Pro). Specifically, Version: 11.0.9600.17728, Update Version: 11.0.18. @font-face is working fine for me on Chrome, Firefox, Safari, Opera (both Linux and Windows, where applicable). In fact, it's even working on Internet Explorer Version: 11.0.9600.17633, Update Version: 11.0.16, also running on Windows 7 on a different machine I have. There is nothing in the developer console to indicate that there is any problem fetching the fonts. I've simplified my html/css down to some very basic stuff to reproduce the problem. In the case below, neither of the custom fonts are working (for that specific IE version): <pre class="prettyprint"><code><html> <head> <link rel="stylesheet" type="text/css" href="test.css" /> </head> <body> This font should be Roboto Thin There should be icons below. If not, then font-face is not working. a b c d e f g h i j k l m </body> </html> </code></pre> ...and the CSS: <pre class="prettyprint"><code>@charset "UTF-8"; @font-face { font-family: 'robotothin'; src: url('roboto-thin-webfont.eot'); src: url('roboto-thin-webfont.eot?#iefix') format('embedded-opentype'), url('roboto-thin-webfont.woff') format('woff'), url('roboto-thin-webfont.ttf') format('truetype'), url('roboto-thin-webfont.svg#robotothin') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'typicons'; src: url('typicons-regular-webfont.ttf'); } p { font-family: robotothin; font-size: 26px; color: #666; } span { font-family: typicons; font-size: 30px; color: #0062A8; } </code></pre> You can find that code running here. If I view that page using the version of IE causing problems, the text font will be the default and instead of icons you'll only see the letters in the <code>span</code> tags. Given that @font-face is working in every other browser I've tested (even different version of IE 11) is this likely to be a bug with that version of IE, and is there anything I can do to fix or debug further?

This could be related to an issue with the Security Settings as described in this bug report. In Internet Options go to: <ul> <li>The Security Tab</li> <li>Security level for this zone</li> <li>Custom level</li> <li>Downloads</li> <li>Font Download</li> </ul> If it's Disabled then you need to Enable it. <img src="https://i.stack.imgur.com/3rMSg.png" alt='Screenshot of the Internet Options window. The Security tab is selected and the "Custom level..." button has a red box around it.'> <img src="https://i.stack.imgur.com/tHQ1y.png" alt="Screenshot of the Security Settings window. Font download's "Enable" option has a red box around it.">

If issue is "@font-face not working with specific version of Internet Explorer 11" Check whether your font embeddability: Installable <img src="https://i.stack.imgur.com/Fu2uD.png" alt="enter image description here"> If it is not embeddability: Installable add installable font then it will work perfectly.

@font-face not working with specific version of Internet Explorer 11

Tags:

I know there are lots of similar questions but this situation seems really odd. @font-face seems to be broken for Internet Explorer 11 (Windows 7 Pro). Specifically, Version: 11.0.9600.17728, Update Version: 11.0.18.

@font-face is working fine for me on Chrome, Firefox, Safari, Opera (both Linux and Windows, where applicable). In fact, it's even working on Internet Explorer Version: 11.0.9600.17633, Update Version: 11.0.16, also running on Windows 7 on a different machine I have.

There is nothing in the developer console to indicate that there is any problem fetching the fonts. I've simplified my html/css down to some very basic stuff to reproduce the problem. In the case below, neither of the custom fonts are working (for that specific IE version):

<html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css" />
</head>   
<body>      
    <p>This font should be Roboto Thin</p>
    <p>There should be icons below. If not, then font-face is not working.</p>
    <span>a</span>
    <span>b</span>
    <span>c</span>
    <span>d</span>
    <span>e</span>
    <span>f</span>
    <span>g</span>
    <span>h</span>
    <span>i</span>
    <span>j</span>
    <span>k</span>
    <span>l</span>
    <span>m</span>   
</body>
</html>

...and the CSS:

@charset "UTF-8";

@font-face {
    font-family: 'robotothin';
    src: url('roboto-thin-webfont.eot');
    src: url('roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('roboto-thin-webfont.woff') format('woff'),
         url('roboto-thin-webfont.ttf') format('truetype'),
         url('roboto-thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face { 
    font-family: 'typicons'; 
    src: url('typicons-regular-webfont.ttf'); 
}

p {
    font-family: robotothin;
    font-size: 26px;
    color: #666;
}

span {
    font-family: typicons;
    font-size: 30px;
    color: #0062A8;
}

You can find that code running here.
If I view that page using the version of IE causing problems, the text font will be the default and instead of icons you'll only see the letters in the span tags.

Given that @font-face is working in every other browser I've tested (even different version of IE 11) is this likely to be a bug with that version of IE, and is there anything I can do to fix or debug further?