If you are using CloudFront for hosting static assets and having trouble with the CORS which prevents the icons from displaying properly on your website, in this post, I am going to show how to resolve this issue.

In case you are having an issue with woff2 or woff or any static fonts, here is the solution.

two steps to solve CORS issue on CloudFront are:

Make change to Nginx or Apache configuration to add Access-Control-Allow-Origin: * to the response data. You can take a look at some guides: http://enable-cors.org/server_apache.html and http://enable-cors.org/server_nginx.html

Add a behavior in CloudFront distribution, remember to whitelist the Origin header

but first you need to have a cdn account with cloud front:

Second. Register new distribution with amazon cloud front by following the default steps

Third assign a CName, make sure you have admin@yourdomain.com email enabled to verify your cdn custom name:

you need to enable cross origin by using php and .htaccess file

Complete example of my htaccess using WPFC

Enable Origin Using your cloudfront account:

we recommend using
HTTP Headers by Dimitar Ivanov wordpress plugin and configure the settings as following

in other cases and if you are using nginx, we recommend the following
1-Edit common_http.conf

2-Add the origin to cloudfront behavior
3-set Invalidations inside cloudfront, eg:

in case you are using WP-Optimize wordpress plugin you need to configure both the cookies caching and pages caching correctly as following

Cookies caching

Thats all,

if you need paid support on this, message me via whatsapp www.wtsb.me