I’m building a Rails site that uses the excellent asset_sync gem to push my assets up to an S3 bucket on deploy, and I ran into an issue where @font-face fonts were rendering fine in all browsers except Firefox. After a little googling, I found that it’s an issue with Firefox’s “file uri origin” policy.

http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie
http://stackoverflow.com/questions/5008944/how-to-add-an-access-control-allow-origin-header

The quick and easy solution, outlined in the stackoverflow posts, was to edit the Apache / Nginx config and add the Access-Control-Allow-Origin header.  However, since my fonts live in an S3 bucket, there’s no Apache / Nginx config file for me to edit.  More googling ensued, and I found this AWS documentation:

http://aws.amazon.com/about-aws/whats-new/2012/08/31/amazon-s3-announces-cross-origin-resource-sharing-CORS-support/
http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html

After a little trial and error, I created a policy that passed the required headers with my content.  Here it is:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

Important note: the configuration above will allow any domain to serve your content. If you’d like to lock it down, you can change the <AllowedOrigin>*</AllowedOrigin> tag like this:

  <AllowedOrigin>http://example.com</AllowedOrigin>
  <AllowedOrigin>http://www.example.com</AllowedOrigin>

You may add as many <AllowedOrigin> tags as you need.

Voila! @font-face fonts work on Firefox!