CDNs & Fonts

Recently I have had need of hosting my own web fonts while playing around with Bootstrap. Which worked fine when hosted through my own domain. But as soon as I tried to host those same files from a CDN or a domain that was not the main one (ex. static.*), the fonts would fail to render on certain versions of IE and Firefox, but would render fine in Chrome.

The issue comes from the fact that the W3C spec says that font files have a same origin policy outlined here, so it seems that Chrome is actually the browser that is incorrectly allowing these files.

So the solution is easy, just add a CORS header:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|svg|font.css)$">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Place this inside a .htacccess or in your apache conf file. If the files have already been cached on the CDN, then you would need to purge these files from the CDN or increment the version on the files.