Tuesday, February 16, 2016

Load Fonts From Cross-Domain

For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though they do work (incorrectly so) in Webkit-based browsers. They actually require custom CORS configurations to display properly.  Here's the code you'll need to make that happen.

If your server use apache

Add this code to your .htaccess of your cdn in top-level (root)
<FilesMatch "\.(ttf|ttc|otf|eot|woff|svg)$">
     <IfModule mod_headers.c>
          Header set Access-Control-Allow-Origin "*"
     </IfModule>
</FilesMatch>

Then enable mod header On your apache:
sudo a2enmod headers
sudo service apache2 restart

Setup Finish

To ensure the header is set properly, you can check using the curl utility:
curl -I http://cdn.dev/fonts/font.eot
If you see Access-Control-Allow-Origin: * in the response, you're exelent!

Good Luck !!!

1 comments:

Not only this,there are a lot of things that doesn't work in Firefox and internet explorer. Anyways,Thanks for the code.I will definitely try it.

Post a Comment