Serving web fonts via AWS S3 and Cloudfront

Typically when using custom fonts on a client's website we'll utilize a third-party service such as TypeKit or Fonts.com. Unfortunately, using a third-party service wasn't an option this latest time around.

In the interest of speed we host all of our assets on S3 which is then distributed world-wide via Cloudfront. Fonts were no exception however we ran into a few gotchas along the way.

As it turns out, web fonts are subject to Cross-Origin Resource Sharing (CORS). CORS is a way for a remote host to control access for certain types of resources. Certain browsers (Chrome, Safari) will ignore CORS and make the request while others (IE, Firefox).

To ensure that all browsers are able to retrieve the fonts you must follow the instructions below:

S3

1. Select the bucket in question.
2. Select the "Properties" tab.
3. Expand the "Permissions" section.
4. Click the button "Edit CORS Configuration".
5. Enter the following into the box (edit for your domain): https://gist.github.com/tmilewski/bfaebc876cc116623e86

Cloudfront

The S3 implementation is easy enough but Cloudfront (or any CDN) has a major gotcha which lead to a lot of confusion and frustration:

HTTP/HTTPS

In the S3 example we allowed requests to come from both HTTP and HTTPS. When a CDN enters the picture it will cache the response from S3. Therefore, if you request the font with HTTPS any future CORS request from HTTP will sadly fail (and vice-versa).

Pick one and stick with it.

Related protips:

Common fonts for Windows & Mac