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

Question

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?

Not a bug in that specific build of IE, but rather something to do with the settings of that browser (or perhaps the network that the machine is running on). I'm running 11.0.18 (build ending in 17728) and it's working for me. — Adam Jenkins, May 11 '15 at 18:17
For future readers: this might be related to HTTP cache headers; see https://stackoverflow.com/questions/31291414/font-awesome-icon-is-not-appearing-in-ie-11-but-showing-in-other-browsers/39055984#39055984 — Arjan, Aug 02 '18 at 11:24

BSMP · Accepted Answer · 2017-12-29T05:46:31.373

16

This could be related to an issue with the Security Settings as described in this bug report.

In Internet Options go to:

The Security Tab
Security level for this zone
Custom level
Downloads
Font Download

If it's Disabled then you need to Enable it.

edited Dec 29 '17 at 05:46

answered May 11 '15 at 18:17

BSMP

4,596
8
33
44

It was working fine previously until the auto-update did its thing. So, IE disabled that font download option during the update to this latest version. Ridiculous. But would it not do the same thing for everyone else, causing font-face to break for everyone? – RTF May 11 '15 at 18:27
I would think so, at least for anyone who did the update, but I don't know for sure. – BSMP May 11 '15 at 19:26
2

I have the 'Font Downloads' enabled, but running [1]: https://www.redbrick.dcu.ie/~elzilcho/font-test/test.html sample codes from the link above still fails on IE 11 [1]: https://www.redbrick.dcu.ie/~elzilcho/font-test/test.html – gye Apr 21 '17 at 20:46

score 2 · Answer 2 · answered Mar 09 '18 at 19:04

2

If issue is "@font-face not working with specific version of Internet Explorer 11"

Check whether your font embeddability: Installable

If it is not embeddability: Installable add installable font then it will work perfectly.

answered Mar 09 '18 at 19:04

Thilina Dharmasena

2,243
2
19
27

jofeu · Answer 3 · 2018-07-05T10:15:15.337

0

The problem may be related to using HTTPS on specific versions of Internet Explorer. I have found that Version 11.0.9600.19035, Update version 11.0.65 running on Win 7 is also affected.

Even though Google states to support Microsoft Internet Explorer version 6+, their fonts are affected in the same way as described above.

Serving the font via HTTP will bring a "mixed content" warning. After accepting the warning, the font will display on affected IEs, but NOT on unaffected ones.

Currently I know of no workaround, not even a way of detecting affected versions via HTML/CSS/JavaScript.

edited Jul 05 '18 at 10:15

answered Jul 05 '18 at 10:01

jofeu

65
3

Same issue in an old Windows 7 VM with version 11.0.9600.18163, update version 11.0.27, KB3124275, which in the About dialog [links to a January 2016 update](https://support.microsoft.com/en-us/help/3124275/ms16-001-security-update-for-internet-explorer-january-12-2016) which [refers to an old security bulletin](https://docs.microsoft.com/en-us/security-updates/SecurityBulletins/2016/ms16-001). However, at the office somehow the issue seems to have started this week for us. The font is loaded from a subfolder on the same domain, and has not changed recently. But maybe some headers did change. – Arjan Jul 25 '18 at 19:12
More fun facts: all fine in an installation of 11.0.9600.10035 with update version 11.0.66 [documented as June 12th](https://support.microsoft.com/en-us/help/4230450/cumulative-security-update-for-internet-explorer), which you mentioned to be troublesome in your answer. And problems for the very same website when accessed from another network with 11.0.9600.19080, update version 11.0.70, [July 10th](https://support.microsoft.com/nl-nl/help/4339093/cumulative-security-update-for-internet-explorer). So I guess it's something in our network that's causing issues, not the version of IE11. – Arjan Jul 26 '18 at 06:45
Indeed, for us not related to any specific version, but to changes in the headers; see https://stackoverflow.com/questions/31291414/font-awesome-icon-is-not-appearing-in-ie-11-but-showing-in-other-browsers/39055984#39055984 – Arjan Aug 02 '18 at 11:23

score 0 · Answer 4 · answered Feb 16 '19 at 09:05

0

Fixed by removing of the "Vary" header for the "eot" files on apache level

<Location ~ \.eot$>
  Header unset Vary
</Location>

answered Feb 16 '19 at 09:05

Evgeny Konstantinov

221
3
9

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

4 Answers4

Linked

Related