Using Web Fonts with Amazon S3 and Firefox. Finally!

Posted by Philip Bulley | Filed under Amazon Web Services, Tips

Until a few days ago, if you’d wanted to use a web font (@font-face) hosted on AWS S3 within a document on another domain (ie. an EC2 instance) – unless you were happy with the near-crazy Base64 embedding into bloated CSS file technique – you’d be out of luck when it came to the goodie-two-shoes of web browsers, Firefox.

Firefox would demand that you specify an “Access-Control-Allow-Origin” header on your server’s response. This is not rocket science when it comes to serving files from a regular web server such as Apache, but of course S3 is very different to all of the other kids (with good reason). It was just a shame that S3 didn’t have a way of specifying such a header bucket-wide, until now.

Via the AWS S3 console:

Screenshot of AWS S3 console, making this just too easy for you :)

go to “Properties > Permissions > Edit CORS Configuration” and paste the following XML:

1
2
3
4
5
6
7
<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <MaxAgeSeconds>3600</MaxAgeSeconds>
 </CORSRule>
</CORSConfiguration>

This Cross Origin Resource Sharing policy allows GET requests from any domain. The response will be cached by the browser for an hour, preventing multiple unnecessary preflight requests on your S3 bucket should users be repeatedly loading style sheets containing @font-face rules across HTML pages.

Official documentation here.

Tags: , ,

Permalink | September 25th, 2012

2 Responses to “Using Web Fonts with Amazon S3 and Firefox. Finally!”

  1. Beth
    October 28th, 2012 at 3:18 am

    This makes perfect sense but I am not seeing under my permissions the edit CORS configuration option. Did I miss a step? Please help this sounds like a perfect fit for my font issues!

  2. Rob
    May 8th, 2013 at 3:02 am

    Phew. Thanks a lot for posting – been thrashing away at this for a few hours.

Leave a Reply