Font Awesome Woff2 failing to load from Amazon CloudFront
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 which prevented 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. In an average, it reduces file sizes by 40-45%. Sooner WOFF 2.0 would be in the recommended standards of W3C.
Some common fixes suggested working around the issue,
1. Explicitly specifying 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 the fixes #1 to #3 mentioned above did fix the issue for me. I hope it will be useful for others as well.