How to resolve CORS error when loading fonts from AWS S3 using @font-face

You can upload a specific web font to S3's static storage and load it using @font-face, like this:

When loading the font in a local web environment, it works fine without any issues. However, when loading it from S3, a CORS(Cross-Origin Resource Sharing) error occurs. Let's investigate the cause and solution for this issue.

# The cause of the CORS error

The cause of the CORS error is due to different reference origins, which occurs when scripts attempt to load external resources. This error can also occur when scripts access external fonts through CSS.

! How to resolve CORS s3 font issue

The solution is to configure S3's permissions tab to allow access. When you navigate to S3's bucket, you will find the Permissions tab after the Objects and Properties tabs. Click on this menu and scroll down to find CORS settings, where you can see an AllowedOrigins: [] block.다.

@ Before the change:

If you want to allow all origins, you can add the wildcard symbol '*' as follows. (Note that it is recommended to specify only the host address if you are sure of the host's domain for security purposes.)

@ After the change:

You can either enter the domain of the host to be allowed or use the wildcard '*' to make the change.

Once the modifications are complete, reload the webpage to check for any remaining CORS errors. If the issue has been resolved, no further errors should occur when loading the font file from S3.