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).

 

 

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

One Reply to “CloudFront CORS with Custom Origin”

Leave a Reply

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