Things to keep in mind before embedding web fonts & hosting them on a CDN

Web fonts served from Amazon S3 are not working in Firefox. We face this issue every time we deploy a new project and S3 bucket. We found the solution here. I am just summarizing the main points in the following article.

We are looking into this very specific case. You need to enable Cross Origin Resource Sharing to properly Host a Web Font on the CDN.

When you serve your resources or static assets from a CDN, the origin domain is always different from your site domain. Let’s say your app is functional on example.com and the resources are coming from a CDN say somehash.s3.amazon.com. Now cdn origin amazon.com is different from webpage origin example.com and if the User’s Browser is using Same Origin Policy on all resources, the response from the remote server ( i.e. the CDN ) will be denied for security and your web fonts Will Not Work there 😕

This happens in case of Firefox. Firefox enforces the same origin policy on all resources. So the response from the remote server is denied and the web fonts coming from a CDN do not work on Firefox initially. The solution is to enable Cross Origin Resource Sharing. By default, Firefox only accepts resources from the same domain as the host webpage. If we want to include fonts from a different domain, we need to add an Access-Control-Allow-Origin header to the font files.

What is Cross Origin Resource Sharing ( CORS )

The CORS specification uses the XMLHttpRequest object to send and receive headers from the originating web page to a server that is properly configured in order to enable cross-site requests.
The server accepting the request must respond with the Access-Control-Allow-Origin header with either a wildcard (*) or the correct origin domain sent by the originating web page as the value. If the value is not included, the request will fail.
Furthermore, for HTTP methods other than GET or POST, such as PUT, a preflight request is necessary, in which the browser sends an HTTP OPTIONS request to establish a handshake with the server before accepting the PUT request.

An example configuration to enable CORS is as following. We use this for S3 buckets.

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*/AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

One Response to “Things to keep in mind before embedding web fonts & hosting them on a CDN”

Leave a Reply to Utsav

  • (will not be published)