Internet Explorer won't display font icon using @ font-face
I'm having trouble loading a font in IE (IE9). Works great in Chrome.
You can see the problem by looking at this Fiddle . IE9 displays a window, while Chrome displays an asterisk.
I am using the FontAwesome package found here . I think the problem is with the @ font-face declaration at the top of the .css file (shown below). Can anyone understand why IE won't display this font?
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot');
src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/fontawesome-webfont.woff') format('woff'),
url('../font/fontawesome-webfont.ttf') format('truetype'),
url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
font-weight: normal;
font-style: normal;
}
source to share
In jsfiddle, you don't set font-family
for any element, you use italic ( i
element), but yours @font-face
only specifies the normal font, and the jsfiddle doesn't show the problem because @font-face
(and won't work there, since urls are relative).
Also, your jsfiddle is trying to create generated content, not normal content. The character used is a private use character (U + F060), and such characters should not be transmitted or used except in private conventions.
It is best to isolate the problem in the simplest case, to eliminate the consequences of other problems (for example, problems with the generated content).
source to share