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="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:
You may add as many
<AllowedOrigin> tags as you need.
Voila! @font-face fonts work on Firefox!