Font Awesome Woff2 Failing To Load From Amazon CloudFront

Amazon CloudFront

Pre note:

Amazon CloudFront is a content delivery network (CDN) offered by Amazon Web Services. Content delivery networks provide a globally-distributed network of proxy servers which cache content, such as web videos or other bulky media, more locally to consumers, thus improving access speed for downloading the content.

I had a strange issue that prevented the loading of woff2 type Font Awesome fonts from Amazon CloudFront on our Drupal website. The error message as reported on Google Chrome Console is as below,

Font from origin 'https://foobar.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.

WOFF 2.0 - The Web Open Font Format (WOFF) is the next generation of font wrapper format which leverages Zlib compression and thus helps quicker loading over the internet and uses lower bandwidth. On average, it reduces file sizes by 40-45%. Sooner WOFF 2.0 would be in the recommended standards of W3C.

Some common fixes suggested for working around the issue,

1. Explicitly specify the file type

By adding the following line in Apache vhost.

AddType application/font-woff2      .woff2
AddType application/font-woff        .woff

I did add globally in mime.conf at /etc/apache2/mods-available/.

2. overriding access control header in .htaccess

By adding the following rules in .htaccess

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

3. CloudFront Distributions settings

In the Behaviour settings had to turn on "Query String Forwarding and Caching". This was the key thing in my case.

Applying fixes #1 to #3 mentioned above did fix the issue for me. I hope it will be useful for others as well.