1

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 ??

Salma Hamed
  • 2,000
  • 4
  • 26
  • 45

2 Answers2

0

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

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • I still don't get what shall I do to make it work. The solution provided is already handled this is how fontawesome is defined: @font-face{ font-family:'FontAwesome'; src:url('font/fontawesome-webfont.eot?v=3.0.1'); src:url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); font-weight:normal; font-style:normal } – Salma Hamed Feb 05 '13 at 08:37
  • OK, but those links are relative to the stylesheet. Are you loading the stylesheet from the same hostname as your web page? – Boris Zbarsky Feb 05 '13 at 11:06
  • No, my stylesheets are loaded from AmazonS3 while the html templates are loaded from heroku. – Salma Hamed Feb 05 '13 at 13:51
  • 1
    Right, so it's loading the font from a different server than the web page. The spec says this should only work if that server sends the right headers to allow such cross-site linking. You may be interested in http://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa – Boris Zbarsky Feb 05 '13 at 14:28
  • 1
    I'm having this issue as well and already resolved the cross origin policy issue for Firefox, the same fix doesn't seem to work with IE11 (I shouldn't be surprised). – Noz Aug 07 '14 at 20:26
  • @Noz same here -.- Found a solution so far? – Daniel Nov 19 '14 at 08:16
  • @Daniel Not per se, I eventually gave up. But now that I look at my website in IE11 it seems to be working now... it might have been a caching issue in my case. Sometimes when browsers cache something it's really really difficult to get rid of it. My only suggestion to you is to give it some time and see what happens. If the fix works for you in Firefox it should work in IE as well as they share they same security policy for remote fonts. – Noz Nov 19 '14 at 18:24
  • @Noz thanks for your reply. I managed to fix it. It was a caching issue. I work with Rails and Heroku and in case anyone else has the same problem: increase `Rails.application.config.assets.version`. – Daniel Nov 20 '14 at 10:00
0

Mine was blocked by htaccess.

I have this on my .htaccess and had to add the extensions. 

# Do not process images or CSS files further
RewriteRule \.(css|jpe?g|gif|png|js|ico|mp3|ogg|eot|svg|ttf|woff)$ - [L]
Josh
  • 1