I recently started using s3/cloudfront to host assets for a few apps that I am working on. Initially I thought everything just worked. I moved all of my assets to S3 and updated all of their urls to point to the s3/cloudfront location. All seemed well until I looked at Firefox. My @font-face fonts were not rendering in firefox, which was odd to me. After a long search it seems that you need to use CORS to enable it. To do this log into you AWS console and look at your buckets. For the bucket serving the fonts you want to click on permissions and then edit CORS configuration. In here you want to add something like

1
2
3
4
5
6
7

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

You can replace the * in the AllowedOrigin to be the domain that you will be serving the your webpage from. You can add multiple AllowedOrigin tags for each domain you need to have access to the font-face (e.g. www.example.com, example.com).