Web development and Tech news Blog site. WEBISFREE.com

HOME > webdevetc

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

Last Modified : 24 Feb, 2023 / Created : 24 Feb, 2023
741
View Count
You can upload a specific web font to S3's static storage and load it using @font-face, like this:
@font-face {
  font-family: 'myFont';
    url('s3 storage url')
  }
}

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:
[
   'AllowedOrigins': [],
   ... 
]

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:
[
  'AllowedOrigins': [
    '*'
  ],
...
]

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.
Perhaps you're looking for the following text as well?

    Previous

    Webstorm IDE useful Shortcuts

    Previous

    Learn how to chat with ChatGPT and listen through the microphone and speaker