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:
go to “Properties > Permissions > Edit CORS Configuration” and paste the following XML:
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.