Solved : CloudFront Font not loading – CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource
CORS is industry standard for accessing web resources on different domains. It is very important security concept implemented by web browsers to prevent Javascript or CSS code from making requests against a different origin.
I had a strange issue which prevented loading of woff2, woff, eot, ttf type Font Awesome fonts from Amazon CloudFront on our WordPress website. The error message as reported on Google Chrome Console is as below,
{Read:- Best PWA WordPress Plugins 2021 }
Font from origin ‘http://xyz.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.
In order to fix an issue for your WordPress blog, just put below into your .htaccess file.
|
1 2 3 4 5 |
<IfModule mod_headers.c> <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule> |
As you see Access-Control-Allow-Origin “*” allows you to access all resources and webfonts from all domains.
To forward the headers from your CloudFront distribution, follow these steps:
{Read:- SEO Benefits of Pingback in WordPress }
- Open your distribution from the Amazon CloudFront console.
- Choose the Behaviors view.
- Choose Create Behavior, or choose an existing behavior and then choose Edit.
- For Cache Based on Selected Request Headers, choose Whitelist.
- Under Whitelist Headers, Add “Origin” to the “Whitelist Headers”.
- Make sure that “Use Origin Cache Headers” is checked
- Choose Yes, Edit.
The last change is to invalidate your cached fonts – to do this go into your Cloudfront Distribution settings and then select “Invalidations”. There you create a new validation and you configure the object path pointing to your theme font files (you can use wild-cards such as “/themes/hueman/fonts/*.woff”)
