Set allow origin flag for fonts

When putting fonts on a server to host them and use them somewhere else (eg. a cdn subdomain) they won't be loaded without the right Access-Control-Allow-Origin header.

To set that you can use the following lines in ether a .htaccess file for Apache or the nginx config:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">  
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){  
    add_header Access-Control-Allow-Origin *;
}

Test if they can be loaded with the following console command:

$ curl -I https://cdn.yourdomain.com/media/fonts/somefont.ttf

Which should give a result like the following:

# Result
HTTP/1.1 200 OK  
Server: Apache  
X-Backend-Server: developer1.webapp.scl3.mozilla.com  
Content-Type: text/plain; charset=UTF-8  
Access-Control-Allow-Origin: *  
ETag: "4dece1737ba40"  
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT  
X-Cache-Info: caching  
Cache-Control: max-age=604795  
Expires: Wed, 19 Jun 2013 16:22:58 GMT  
Date: Wed, 12 Jun 2013 16:23:03 GMT  
Connection: keep-alive  
comments powered by Disqus