Getting Fonts Working Cross-Origin

Using fonts from another domain can get icky. Here’s a way to fix that in Nginx and Apache.


We use a font icon set called FontAwesome at Obstance and ran across a small problem: we were unable to get it to load cross origin. What this means is that if you’re linking your fonts from a domain other than the one you’re on, such as one from a CDN, it won’t load in non-webkit browsers. It just breaks and shows an ugly, little box. This is intended according to specs, so you’d need to find a way to get them to work with browsers like Firefox and Internet Explorer. Chrome allows cross domain fonts natively (despite specs). If you’re using Nginx, you can add headers doing this:

# Allow cross origin fonts
location ~* .(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

In Apache, you’d use something like the below. Add it to .htaccess.

Header set Access-Control-Allow-Origin "*"

This works well when you’re running WordPress Multisite with subdomains too.