Problem

Access to font at ‘cdn.subdomain.tosunkaya.com/test.woff2’ from origin ‘https://subdomain.tosunkaya.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

CORS Solution for Cloudfront

CloudFront > Distributions > Edit your default behaviour

Select Legacy cache settings on Cache key and origin requests

Headers > Select Include the following headers

Add header > Select Origin

Done.

Alternative:

1. Goto S3 Bucket->Permissions->Edit : Cross-origin resource sharing (CORS)->paste below configuration. In most of the other articles they are doing mistake of wrong header. you have to put “Origin” in AllowedHeaders.[ { “AllowedHeaders”: [ “Origin” ], “AllowedMethods”: [ “HEAD”, “GET” ], “AllowedOrigins”: [ “http://www.yourdomain.com”, “https://www.yourdomain.com”, “https://yourdomain.com”, “http://yourdomain.com” ], “ExposeHeaders”: [], “MaxAgeSeconds”: 3000 } ]
2. Goto Cloudfront->Behaviours->Default(*)->Edit Change, Cache and origin request settings to : Use legacy cache settings Change, Cache Based on Selected Request Headers to : Whitelist Then, Add Whitelist Headers to : Origin [Only]

Alternative:

Updating the Origin policy to CORS-S3origin worked for me as below once S3 was configured correctly.

https://stackoverflow.com/questions/51932528/cors-issue-from-cloudfront-to-server-for-font

https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

Add CORS Allow Fonts Rule to .htaccess

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

If your theme or plugins employ web fonts that are referred to in their stylesheets, you can also have broken fonts while using CDN to serve your site’s JS, CSS, and other files:

This is because Cross-Origin Resource Sharing may apply to online fonts (CORS). A remote host can manage access to certain resources using CORS.

Enabling CORS on S3 Buckets

Follow these steps to guarantee that browsers may access the font files saved on S3:

Go to the S3 service and your AWS console.
Choose the asset storage bucket you want to use.
Then select the Permissions tab.
To display the CORS configuration editor, click CORS configuration.

You will be given a default XML setup by AWS that is perfect for your needs:

<!-- Sample policy -->
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

The ‘AllowedOrigin’ should be restricted to your domain as your site is the one making the font resource request:

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://www.mysite.com</AllowedOrigin>
<AllowedOrigin>https://www.mysite.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>DELETE</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Enabling CORS on CloudFront

You must choose whether your site will make HTTP or HTTPS queries if you use CloudFront as your CDN and wish to utilise the example CORS configuration that only allows requests from your site.

The aforementioned example permits requests from both protocols, however CloudFront will store the response from the initial request and will fail if it receives a second request from a different protocol. Therefore, only mention HTTP in the setup if your website uses HTTP, and vice versa if it uses HTTPS.

Additionally, make sure the “Origin” header is included in the “Whitelist Headers” section.

When adding the CORS configuration to your S3 bucket while already delivering assets over CloudFront, you must first execute a purge from Cloudflare or your cache plugin. This will make sure that CloudFront receives the updated CORS settings.

Old Cloudfront Menus:

How to fix the CORS problem if you’re using CloudFront to host static files and are having difficulties getting the icons to appear correctly on your website.

As you are already aware, the primary reason for the CORS problem is that your website’s fonts are loaded from a different domain than it. You would see a CORS issue, for instance, if your domain is http://example.com and you are utilising CloudFront, which has a domain of http://something.cloudfront.net. The server must provide the Access-Control-Allow-Origin: * header in the response data to resolve this problem (see some links at the bottom of this post for more information). When caching the assets, CloudFront just disregards this header, therefore the issue persists.

Perhaps in response to numerous pleas from the community, AWS has now offered to help resolve this problem. When you open your CloudFront distribution, the Behaviors tab will be visible. You can instruct CloudFront on how to treat a particular resource while using AWS CloudFront by providing it with a behaviour. It is our responsibility to add proper font behaviour so that CloudFront may send the required header to the browsers.

Suppose that we’re viewing the following warning message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://x3dskd59dg.cloudfront.net/assets/font-regular.woff2. Moving the resource to the same domain or turning on CORS can fix this.

With the knowledge below, I would develop new behaviour:

Path: /assets/font-regular.woff2

Forward Headers: Whitelist

Headers on the whitelist (This is the most important step, you need to select Origin header and add it to the whitelist in the right column)

The default values can be used for all other fields.

By performing this, CloudFront will allow the browsers to see the Access-Control-Allow-Origin: * header. To erase the cache, you might need to invalidate that font on CloudFront. Check out how great the icons are by refreshing the browsers now.