Firefox Fonts via CDN with NGINX - Access-Control-Allow-Origin Header

Question

Firefox does not allow cross domain fonts it seems. In order to serve fonts from a domain other than the web page, the font files need to be served with a Access-Control-Allow-Origin header. I am currently acheiving this via NGINX like this.

location ~* .(ttf|woff|eot|otf)$ {
        add_header Access-Control-Allow-Origin *;
        expires 8d;
}

This is working perfectly, however I was wanting to know what the proper value(s) for the header would be, if I did not want to use *. Would be the subdomain I'm using for the CDN? The domain for the site? How would I specify multiple values?

Answer 1

It needs to be the doamin(s) from where you are requesting the resources.

Let's say you use the font for domain http://example.com then add Access-Control-Allow-Origin: http://example.com. You can space-separate multiple origins.

In some browsers multiple domains cause issues. In that case you can programmatically read the Origin header of the response, check it against some whitelist and respond with the same value in Access-Control-Allow-Origin header. IMO, the latter would be the best practice.

Additional Note

The value of the Access-Control-Allow-Origin header need to consist of scheme (e.g. http), domain (e.g. example.com) and port (only if it is not a default port).

W3C Spec