Rails 3, @font-face failing in production with firefox

Question

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:

• Chrome renders the icons fine in development and production
• This just affects FireFox (although I've not tried IE)
• The app is here, I'd appreciate if someone could confirm that this is not just happening on my machine (to help me rule out a localhost caching issue).
• All assets, including fonts and stylesheets, are hosted on S3, using the asset_sync gem.

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.

Answer 1

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... :-(