Webfonts, asset hosts and Firefox

Written by mitro on November 24th 2011

CSS3 made it not only possible but also quite easy to use custom fonts for your websites - this is good.

Asset hosts (faked or real ones) can improve your website's loading time by distributing requests to several different servers - also a good thing.

However, if you use webfonts and serve your font files from asset hosts you will notice that Firefox does not render them. Or worse, it sometimes renders them.

What is happening here is actually a security enhancement in its full glory. Firefox prevents downloading of assets from domains that differ from the domain the original request came from to protect you from someone hotlinking your fonts and stealing your bandwidth.

So in order to make things work you have to explicitly allow cross-site HTTP requests by sending the "Access-Control-Allow-Origin"-header along with the response.

This header takes one parameter which can be either a domain name or "*" to allow requests from every domain - unfortunately you cannot provide a list of domains (actually you can but this requires cheating on the server side and is beyond the scope of this post).

nginx admins will have to add something along these lines to their configuration:

location ~ \.(otf|ttf)$ {
  add_header Access-Control-Allow-Origin *;
}

Apache users might use this snippet:

<FilesMatch "\.(ttf|otf)$">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

For further reading please refer to HTTP access control on the Mozilla Developer Network.