CDN fonts not showing in IE and Firefox despite enabling CORS

There are many frustrating aspects of web development, but surely one of the most frustrating is when something works fine for you, but not for someone else. That frustration is compounded if you establish you’re using the same browser version on the same platform! This happened to me during the redesign of this site.

I was using both Googles and Twitters Bootstrap CDN’s to serve fonts. I’d enabled Cross-Origin Resource Sharing (CORS) in my .htaccess file to avoid known issues of fonts not showing in IE and Firefox on Windows. On my test environments all was fine, but someone testing for me from their companies network still wasn’t seeing the fonts in either IE or Firefox. The CORS directive which sets a header to allow content from another domain was seemingly being stripped out by the firewall, although Chrome was fine. The only information I found to really confirm this was an article on Six Revisions.

I don’t know how common this problem is, but it’s made me very wary of relying on CDN’s for fonts, especially icon fonts, with no fallback mechanism such as the Web Font Loader. Rather than that I decided to just host the fonts myself. I loose the benefits of a CDN, but I’m more confident everyone is seeing what they should be.