Coding

Web fonts on Amazon S3

1 Comment

I’ve been waiting ages for this. Amazon Web services added Cross Origin Resource Sharing in August.

CORS enables loads of stuff you couldn’t do on S3 before, but I only need it for one thing, which is hosting web fonts for specific domains.

Here’s is a quick post to explain how to host your web fonts on S3.

Configure your bucket

All you have to do is add a CORS configuration to your bucket in the S3 Management Console. My multi-domain configuration for localise.biz looks like this –

<?xml version="1.0" encoding="UTF-8"?>
  <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
      <AllowedOrigin>http://localise.biz</AllowedOrigin>
      <AllowedOrigin>http://loco.local</AllowedOrigin>
      <AllowedOrigin>https://loco.desk.com</AllowedOrigin>
      <AllowedMethod>GET</AllowedMethod>
      <AllowedMethod>HEAD</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

 

You’ll notice that in addition to my main domain I also added my local development server. Plus my Desk.com help centre, which is SSL. I’m also allowing HEAD requests because it’s useful for testing from the command line.

Testing from the command line

On my first attempt I thought it wasn’t working. This is because I didn’t know how it works. When your browser requests a font file it sends an Origin header in the request which must match your CORS config.

So if you want to test it’s working from the command line using cURL make sure you add the request header with the -H flag, as follows:

curl "http://eu.localise.biz/static/fonts/fontawesome-webfont.eot" \
 -H "Origin: http://localise.biz" -I

 

Watch out for CDNs

If you plan on using CloudFront distributions for your font URLs, be careful. CloudFront caches the Access-Control-Allow-Origin response header. If you’re using two or more specific domains in your CORS rules then you’ll have two or more possible responses which means caching is going to break things.

One thought on “Web fonts on Amazon S3”

  1. I believe the response might even be cached without the origin headers if the resource is requested without them. At least that seemed to happen to us. We have web fonts in S3, using a CloudFront distribution on top of it. A majority of visitors use Chrome or IE. We configured CORS in S3 to get the fonts to work in IE. It worked fine for a while until we noticed that the fonts didn’t show in IE and traced it to missing CORS headers. Changing the URI (causing CloudFront to load from S3) and reloading in IE solved the problem (for now).

Comments are closed.