Font requests to CloudFront are "(cancelled)" - amazon-s3

Question

I have a CloudFront distribution at (static.example.com) which has an S3 bucket as Origin. I am using this distribution to store all the artifacts for client code (JavaScript files, stylesheets, images and fonts).
All the requests to JavaScript files, stylesheets and images succeed without any problem however, requests to font files have the status cancelled in Google Chrome.
Here is how I request those fonts:
#font-face {
font-family: Material Design Icons;
font-style: normal;
font-weight: 400;
src: url(https://static.example.com/5022976817.eot);
src: url(https://static.example.com/5022976817.eot) format("embedded-opentype"),
url(https://static.example.com/611c53b432.woff2) format("woff2"),
url(https://static.example.com/ee55b98c3c.woff) format("woff"),
url(https://static.example.com/cd8784a162.ttf) format("truetype"),
url(https://static.example.com/73424aa64e.svg) format("svg")
}
The request to the svg font file is ok, but the other ones are not ok.
What have I done wrong? Every file in the S3 bucket has public-read ACL.

Answer 1

It seems like this is an issue with CORS preventing to load the fonts from a different domain.
You need to:
Enable CORS on your S3 bucket:
Go to the s3 bucket and on the Permissions tab select CORS configuration, add the permission with your AllowedOrigin:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://static.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
You can add multiple AllowedOrigin:
<AllowedOrigin>https://static.example.com</AllowedOrigin>
<AllowedOrigin>http://static.example.com</AllowedOrigin>
<AllowedOrigin>https://example.com</AllowedOrigin>
<AllowedOrigin>http://otherexample.com</AllowedOrigin>
Or use a wildcard:
<AllowedOrigin>*.example.com</AllowedOrigin>
Whitelist the appropriate headers on CloudFront to be passed to S3:
Go to the Behaviors tab on your CloudFront distribution and select Create Behavior and add the patter you want:
Path Pattern: 5022976817.eot
Cache Based on Selected Request Headers: Whitelist
Add the following headers to the whitelisted headers:
Access-Control-Request-Headers
Access-Control-Request-Method
Origin
You can test that CORS is working properly with curl:
curl -X GET -H "Origin: https://static.example.com" -I https://static.example.com/5022976817.eot
Everything is ok if you get a response header like:
access-control-allow-origin: https://static.example.com