Skip to main content
knackforge blog knowledge base

Font Awesome Woff2 failing to load from Amazon CloudFront

Prenote:

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 'http://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 'http://example.com' is therefore not allowed access.

WOFF 2.0 - The Web Open Font Format (WOFF) is 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.

cloudfront behaviour changing

 

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

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.