If you’re wanting to use CloudFront to host your own fonts, chances are you’ll have to fix a Cross-origin Resource Sharing (CORS) issue.
Luckily, there’s a really quick fix!
First off, make sure you actually have a CORS policy in place.
This can be found in the S3 bucket properties tab -> under permissions
Next just add/edit your bucket’s CORS policy
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Content-*</AllowedHeader> <AllowedHeader>Host</AllowedHeader> </CORSRule> </CORSConfiguration>
Now I originally adjusted AllowedOrigin to use my domain i.e. http://tamcgoey.com, however this caused some weird problems. So I felt it was best just to keep it as a wildcard ().*
Finally all you need to do is make a small adjustment in your CloudFront distribution behaviors settings.
Change your Forward Headers to Whitelist, and under the filter section make sure you add just Origin.
Grab a coffee and enjoy.
Enjoyed the article? Subscribe to my newsletter for more.
© Thomas McGoey-Smith (2014-2018). RSS.