Firefox – Fontawesome Icons not working on IE9 and Chrome

firefoxfont-awesomeinternet explorer

I am using the latest available version available. But the icons are still appearing as boxes in my app on IE9 (Note: It's working fine on IE8). Although when opening fontawesome page, the icons appear normal.

This what I get in the console of the developers tool:

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
fontawesome-webfont.eot?#iefix&v=3.0.1
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
fontawesome-webfont.woff?v=3.0.1
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
fontawesome-webfont.ttf?v=3.0.1

I also find out it not working on Firefox. It works only on chrome and IE8

Any help in what may be causing the problem ??

Best Answer

Like the console says: you're doing cross-origin font loads and not sending the right headers from the server to allow that. See http://dev.w3.org/csswg/css3-fonts/#same-origin-restriction for the spec on this (which Chrome and IE are not following).

Related Solutions

Css – Font Awesome fonts show up as boxes on IE8

I had the same problem and found a solution, I'll post it here in case anyone still needs it.

The problem was that IE failed to load the font files, it was constructing weird GET requests that returned 404 errors.

Using the trick found here: http://www.fontspring.com/blog/fixing-ie9-font-face-problems I was able to fix the issue.

Add ?#iefix to the eot url in the CSS that contains the font-face (in this case font-awesome.css)

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Font Awesome Failed to load resource /font/fontawesome-webfont.woff?v=3.0.1

I recently encountered and solved this problem. The solution is to add the 'font' directory, and any other directories you want resources to be processed to your adhoc includes, so it ends up looking something like this in config.groovy (add directories as needed if you have resources elsewhere).

grails.resources.adhoc.includes = ['/images/**', '/css/**', '/js/**', '/font/**']

More detail here: URLs within CSS files broken with Grails resources plugin 1.2.7

Best Answer

Related Solutions

Css – Font Awesome fonts show up as boxes on IE8

Font Awesome Failed to load resource /font/fontawesome-webfont.woff?v=3.0.1

Related Topic