Icon fonts not loading in IE11

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).

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

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.

---

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

---

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 ...
}

---

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

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.

Refresh the Page

链接地址: http://www.djcxy.com/p/46986.html

上一篇: Rails 3 Web字体（woff）MIME类型

下一篇: 图标字体不在IE11中加载