37

We're using icomoon for our icon fonts, and they work fine in Chrome and Firefox, but won't display in IE11... Sometimes. It seems to work on the first page load, but not on subsequent page loads. Clearing the cache doesn't seem to reset it. This issue may be present in other IE versions, right now we're just focusing on IE11.

Here's our @font-face:

@font-face {
font-family: 'icon';
src:url('fonts/icon.eot?-3q3vo5');
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'),
    url('fonts/icon.woff?-3q3vo5') format('woff'),
    url('fonts/icon.ttf?-3q3vo5') format('truetype'),
    url('fonts/icon.svg?-3q3vo5#rezku') format('svg');
font-weight: normal;
font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
font-family: 'icon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-alphabet:before {
content: "\e600";
}
/* etc etc etc */

But here's where it gets weird. Looking at the developer tools, an HTTP request for the fonts is being sent, but only a few hundred bytes are being received (probably just the headers).

Network panel

But the HTTP response lists the content length correctly as several kilobytes.

Response headers

The "Response body" tab just says "No data to view."

You can see in the Network Panel screenshot that the Google Fonts aren't behaving like this.

Pasting the URL in the location bar results in the full file being downloaded.

7
  • Check your mimetypes, and ensure the font names/filenames/font-face names are all alike (IIRC, IE has an issue with generic names). Also, are they served from the same domain as your site? (no subdomain?) Nov 12, 2014 at 19:06
  • They are served from the same domain. The font names/etc do match up. It looks like TTF is being reported as "application/octet-stream", I'll fix that and report back. The other MIME types seem to be fine. Nov 12, 2014 at 19:43
  • 1
    I pointed IE to the dev environment on my Mac, and the fonts seem to work consistently. I have no idea what the difference would be, the code is exactly the same as the live server. Nov 12, 2014 at 20:58
  • 4
    No fix yet. We ended up dropping IE support. Apr 17, 2015 at 20:35
  • 1
    @Matthew Rath What do you mean by the embedded font name?
    – gye
    Apr 24, 2017 at 20:00

7 Answers 7

35

Ran into a similar problem, and from your screenshot above, the response has a Cache-Control header of 'no-store'. IE seems to have issues with caching and fonts.

Removing both the 'Cache-Control: no-store' and the "Pragma: no-cache" headers worked for us to get icon fonts to show up again.

https://github.com/FortAwesome/Font-Awesome/issues/6454

0
15

After investigating the very same issue, and going through various solutions posted online, I've created the following troubleshooting list, which covers most potential causes:

  1. Font downloads are disabled in IE, under Internet Options / Security / Custom Level / Font Downloads enable /disable. They might be disabled by your network admin, in which case you would not be able to see nor change this setting.
  2. Your HTTP headers prevent IE from storing the font file locally. To fix, remove any Cache-Control: no-store, no-cache or Pragma: no-cache headers, or any Expires header with a date in the past. Also the Vary header has its tricks in IE, if set to anything other than Accept-Encoding, User-Agent, Host or Accept-Language then IE will not cache anything, unless an ETAG header is also present (see this MSDN blog post).
  3. You don't set the correct MIME types for the font download. For example Jetty 9 will set by default Content-Type: text/plain for the usual font types (eot, woff, woff2). See this answer for the proper content types to use.
  4. Make sure to use display: block or display: inline-block for your icon element.
  5. Finally, make sure to go through the troubleshooting guide over at FontAwesome.
3

I faced similar problem but with Bootstrap font icons (Glyphicons). You can try if this works:

(Generally on Windows 10) the IE-11 settings have been changed to not download any external fonts and use only the fonts available in windows. This is the default behavior.

However we can change this setting in IE to enable it to download external fonts. Following are the steps to be taken in IE- Go to: Settings >> Internet Options >> Security enter image description here

Click on “Internet” (or any zone that you may be using) >> “Custom level…”
Next in the ‘security settings’ – Enable ‘Font Download’. By default it would be disabled. enter image description here

Refresh the Page

2

I had a similar problem and it seems to be caused by IE having difficulty with certain display and position settings in combination with iconfonts.

It should usually work using:

element:before {
     display:block;
     position: absolute;
     ... your styles ...
}
0
1

The syntax is correct, however there may be an issue with the way whatever converter you used to converted from .tff to .eof. See this the article for more details on this matter in general http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

In the mean time you could try testing the problem by using a font hosted by Google fonts. I say this because Google handles cross browser compatibility seamlessly. If it turns out that the Google font works then you know its a problem with the way that your font was converted and you need to try another one. From what I understand Font Squirrel is really good at generating cross browser compatible fonts. I hope this helps good luck

1

This is the problem: https://learn.microsoft.com/en-us/windows/security/threat-protection/block-untrusted-fonts-in-enterprise#Turn_on_and_use_the_Blocking_untrusted_fonts_feature

Basically Microsoft is making us have to go back to using sprite sheets.

1

In my case, it was corrupted .eot font file. I had generated new one ( + new .css styles) and it fixed the problem. Try it.

PS. Make sure you support EOT for IE at @font-face, for example:

@font-face {
  font-family: "fontName";
  src:url("../../src/theme/fonts/fontName.eot");
  src:url("../../src/theme/fonts/fontName.eot?#iefix") format("embedded-opentype"),
  url("../../src/theme/fonts/fontName.woff") format("woff"),
  url("../../src/theme/fonts/fontName.ttf") format("truetype"),
  url("../../src/theme/fonts/fontName.svg#fontName") format("svg");
  font-weight: normal;
  font-style: normal;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.