CloudFront CORS with Custom Origin

Modern browsers respect Cross Origin Resource Sharing which means they won’t load web fonts (.woff, .ttf, etc.) from a CloudFront distribution.

If you are using a custom origin (AKA your website) for CloudFront you need to do the following:

1. Send the header Access-Control-Allow-Origin: * when serving up web fonts on your server.

Example for Apache (in .htaccess):

# Set CORS headers so CloudFront will forward them
 <FilesMatch ".(eot|ttf|otf|woff|svg)">
 Header set Access-Control-Allow-Origin "*"
 </FilesMatch>

2. Edit your CloudFront distribution Behavior to Forward Headers and add Origin to the whitelist. I know this doesn’t make a ton of sense but that’s how AWS set it up (source).

CloudFront whitelist Origin header

 

3. Invalidate your cache from the AWS console or just wait until CloudFront refreshes its cache.

One thought on “CloudFront CORS with Custom Origin

  1. Pingback: heroku - Getting Foundation Icons to display in Rails 4 / Cloudfront Environment - CSS PHP

Leave a Reply

Your email address will not be published. Required fields are marked *