Hosting Web Fonts on Amazon S3 (IE CSS3117 and Firefox bad URI or cross-site access not allowed errors)

If you’ve ever tried to host web fonts on a different domain you’ve probably run into the following errors in IE and Firefox:

Internet Explorer


CSS3117: @font-face failed cross-origin request. Resource access is restricted.

view raw

error.txt

hosted with ❤ by GitHub

Firefox


downloadable font: download failed (font-family: "MyFont" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed

view raw

error.txt

hosted with ❤ by GitHub

Usually this is a simple matter of updating your server with the Access-Control-Allow-Origin header. Unfortunately if you’re hosting your assets on Amazon S3 or CloudFront, editing the server config to add this isn’t possible.

This problem was originally posted to the AWS forums back in 2009… and a mere 3+ years later they finally released a fix.

Simply go to the Properties pane in the S3 Management Console and edit the CORS configuration. Here’s an example configuration:


<CORSConfiguration>
<CORSRule>
<AllowedOrigin>http://mydomain.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

view raw

config.xml

hosted with ❤ by GitHub

You can find more information about configuring CORS here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

One thought on “Hosting Web Fonts on Amazon S3 (IE CSS3117 and Firefox bad URI or cross-site access not allowed errors)”

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s