I'm using font-awesome in a rails 3 app, and everything is ok in development mode, but when I push to Heroku, Firefox fails to render the icons, and instead, I see this:
Here's what I've done:
Added the following to the top of font-awesome.css.scss:**
// font-awesome.css.scss
@font-face {
font-family: 'FontAwesome';
src: font-url("fontawesome-webfont.eot");
src: font-url("fontawesome-webfont.eot?#iefix") format("eot"),
font-url("fontawesome-webfont.woff") format("woff"),
font-url("fontawesome-webfont.ttf") format("truetype"),
font-url("fontawesome-webfont.svg#FontAwesome") format("svg");
font-weight: normal;
font-style: normal;
}
Then I put this in application.rb:
# application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )
Finaly I placed all 4 font files in app/assets/fonts
.
I would really like to know what I'm doing wrong here.
This is the configuration I added to my bucket in AWS management console to configure this cross thing:
Log in to AWS -> AWS Management Console -> S3 -> Find your Bucket -> Push properties button (magnifying glass on paper for some reason) -> Clic PERMISSIONS on the right -> "Edit CORS configuration"
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
After two hours of researches... :-(
I fixed my problem.
From this article, I learned that:
Firefox rejects all cross-site font requests unless some specific headers are set:
[i.e. Access-Control-Allow-Origin]
And, from this article:
Sadly, right now S3 doesn’t allow you to specify the Access-Control-Allow-Origin header that your objects get served with
So you have a few options:
I've gone with the first option since this is gonna be a low traffic site, but here's a nice write-up on how to serve fonts from Rackspace whilst simultaneously serving all other assets from S3.
UPDATE:
Amazon announced yesterday that they now support Cross Origin Resource Sharing (CORS), so the solution posted above should no longer be necessary. Their developer guide explains more.
Amazon S3 now support CORS, you're no longer forced to embed BASE64 fonts in your css (it will save you some bandwidth :)
http://aws.amazon.com/about-aws/whats-new/2012/08/31/amazon-s3-announces-cross-origin-resource-sharing-CORS-support/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With