We recently run into an issue with Firefox not loading fonts through the @font-face CSS statement. Everything was looking OK on our local environments but once we deployed to a live site this browser was denying renderization of the different font types.
After a quick check to make sure the deployment process had run correctly and emptying browser cache, we were suspicious of our media being hosted on Amazon S3. Accessing or loading resources from different domains (known as cross-domain) is a security issue that browsers must implement; however, sometimes ones implement it in a much more strict way than others.
Most modern browsers (Chrome, Safari, latest versions of Internet Explorer) allow loading cross-domain fonts from CSS. Firefox does not. For many projects, the most straightforward solution (also kinda cool because of the provider) is using Google Fonts as a CDN, because they provide a well-known workaround for this.
But when your project requires very specific fonts that cannot be found on Google Fonts and you are using S3, there is something very easy to solve the problem: CORS (Cross-Origin Resource Sharing).
Configuring it is extremely easy:
- Go to your console
- Edit the properties of your bucket
- On the permissions section, look for the Edit CORS configuration
- Applying the default XML configuration worked like a charm for us! But you may want to tweak or restrict your access, based on HTTP methods, origins or headers.