Using @font-face Fonts Cross Domain

On a new project I hit a restriction trying to use some nice font-face web fonts. The client has around 10 different domain names, and all of them point back to one central site. When you visit the main URL, everything is great. When you visit any one of the other URL’s… the fonts don’t work.

After looking around for this, I’ve found that there’s a cross-domain policy put in that will block any font library files that are not from that domain. This was put in place as a security measure to both stop people from injecting “bad” code into the font files, and also to ensure that licensed fonts are restricted to the domains that they are meant to be shown on.

There is a way to get around this though, and it’s more simple than you think! All you need is a small addition to your sites .htaccess file. Just add in this, and you’ll be all good.

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

Leave a Reply

Your email address will not be published. Required fields are marked *