CORS issue from CloudFront to server for font

References (After looking into references, found these reference that worked for me. I didnt add any CORS on S3 bucket. Only Cloudfront accessing S3) [for your case change themes to assets]

https://deliciousbrains.com/wp-offload-media/doc/font-cors/

http://thelazylog.com/correct-configuration-to-fix-cors-issue-with-cloudfront/

Tried everything but nothing worked! But the solution was very easy just two-step solution and nothing else.

1. Go to 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. Go to 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]

Cloud Front Added Origin Policy Recently. Updating the origin policy to s3origin worked for me as below once S3 was configured correctly.

Update July 2023:

My problem was resolved after applying the following changes:

1. Change the permissions of the bucket on S3:
   • Go to s3.console.aws.amazon.com/s3 and select the bucket.
   • After selecting the bucket, click on Permissions tab:
   • Scroll down to Cross-origin resource sharing (CORS) section and add the following:

     [
        {
            "AllowedHeaders": [
                "*"
            ],
            "AllowedMethods": [
                "GET",
                "HEAD"
            ],
            "AllowedOrigins": [
                "http://example.com",
            ],
            "ExposeHeaders": []
        }
     ]
     

2. Change the behavior of the distribution:
   • Select the behavior and click on edit icon:
   • Make sure you have added the OPTIONS method for Viewer section:
   • Change the Origin request policy permission.

1. Go to CloudFront
2. Pick the distribution
3. Edit Behavior
4. On Response headers policy: CORS-with-preflight-and-SecurityHeadersPolicy
5. Save changes

I resolved the CORS issue by adding a custom origin header in CloudFront.
Specifically, I set the header value to the full domain (e.g., https://domain), and the fonts started loading correctly afterward.