Font-awesome not properly displaying on Firefox / how to vend via CDN?

Question

I can\'t get font-awesome to display properly in firefox, even in localhost. I\'m receiving the following cross domain error:

Timestamp: 08/08/2012 02:49:37          


        

Answer 1

If you're using AWS Cloudfront as in my case, you'll need to add a CORS Policy. S3 intentionally won't allow you to set the headers during upload because you need to use the policy instead.

This policy configuration should do the trick for you:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

This will get Font-Awesome working from a CDS on Firefox and Internet Explorer (IE).

Answer 2

I was having the same issue on magento 2.0. It was working fine on https but not on http. In order to allow font-awesome icons to load on http. I added following in the .htaccess situated on root directory of magento installation.

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Answer 3

This solved the Firefox cross domain font issue for me (which causes the font to not load in Firefox). Just add the following to .htaccess or directly to apache config:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

There is a webpage with instructions on how to set up CORS with different servers: https://enable-cors.org/server.html

Answer 4

If you're building a rails app (or some other rack based app) take a look at https://github.com/cyu/rack-cors Super easy to get up and running. You can throw it into application.rb or one of the environment files.

Answer 5

I've usually found adding a local declaration fixes this, as per this. e.g.:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
}

I'm sure the Apache config method is more correct, however you may not be using Apache or may not have the ability to make such overrides.