Mike O’Toole

At Nestio we host all of our static assets on an Amazon S3 bucket, http://static.nestio.com. Generally, this works great, we keep all requests to nestio.com limited strictly to things that require our app servers to respond and offload the work serving static assets to S3. Unfortunately, this comes with one limitation: Firefox won’t show your users fonts you specify with @font-face, unless they’re served off the same domain of the page they’re being displayed on (not even a different subdomain works) or the fonts are served up with a proper Access-Control-Allow-Origin header.

Sadly, right now S3 doesn’t allow you to specify the Access-Control-Allow-Origin header that your objects get served with. For a while, we sort of let this slide and Firefox users just saw the next standard font down on the font stack, but with our recent redesign, we decided to finally implement a fix.

We didn’t really want to make any major changes to our asset deploy pipeline just for fonts, so hosting the fonts somewhere besides S3 wasn’t really a good option.

Instead, we setup a simple nginx VirtualHost for fonts.nestio.com, with the following config:

server {
    listen 80;

    server_name fonts.nestio.com;

    location / {
        proxy_pass http://static.nestio.com/fonts/;
        add_header Access-Control-Allow-Origin http://nestio.com;
    }
}

Requests to fonts.nestio.com are proxied back to our Amazon S3 bucket, so the files themselves are still hosted and can be deployed through S3, but before sending a response to the user, nginx appends the necessary Access-Control-Allow-Origin header.