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.