CODEWITHSUNDEEP
cssfirefoxcross-domainfont-awesome
Alan Illing
Alan Illing

Reputation: 1386

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

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 PM
Error: downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal     `src index:2): bad URI or cross-site access not allowed
source: http://localhost:3000/djpsite/baseadmin/font/fontawesome-webfont.ttf
Source File: http://localhost:3000/djpsite/baseadmin/css/font-awesome.css
Line: 0
Source Code:
@font-face {   font-family: "FontAwesome";   font-style: normal;   font-weight: normal;   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.svg#FontAwesome") format("svg"); }

I used double quotes as suggested by this post: firefox @font-face fail with fontawesome but that didn't resolve the problem.

Everything works fine in Chrome; any suggestions?

Beyond fixing the problem in Chrome, how should I vend font-awesome over a CDN given this restriction: http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction?

Below is the code from my CSS file:

@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.svg#FontAwesome") format('svg');
    font-weight: normal;
    font-style: normal;
}

Thanks for your help!

Upvotes: 12

Views: 30133

Answers (5)

István Ujj-Mészáros
István Ujj-Mészáros

Reputation: 3247

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

Upvotes: 22

Umar Yousaf
Umar Yousaf

Reputation: 101

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>

Upvotes: 0

spikyjt
spikyjt

Reputation: 2240

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.

Upvotes: 3

Joseph Lust
Joseph Lust

Reputation: 19985

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

Upvotes: 2

jeremywoertink
jeremywoertink

Reputation: 2341

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.

Upvotes: 2

Related Questions