Serving @font-face fonts to Firefox from an S3 bucket

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.

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:

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="">

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:


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

Voila! @font-face fonts work on Firefox!


    Kyle Murphy |

    Just ran across your site via a Google search for this problem. Thanks for the write-up.

    andrean |

    got the same problem, thanks for the info!

    William |

    Thanks for the information was searching for a fix, and this is the only one that worked.

    Stefan |