Serving Font from CDN – Dealing with CORS

Serving static files from CDN is a good practice. Unfortunately, if you are trying to serve font files from a different domain, then you might see broken glyphs on Firefox or Internet Explorer browsers. While this works perfectly in Webkit based browsers (Google Chrome), latest Firefox and IE have security implementation which blocks such services.

But the problem to this solution is pretty straight forward. All you need to do is add proper Access Control Origin header.

Adding the header to your CDN server

Your CDN server might be running any kind of web server application. We are going to talk about the most popular ones, Apache and Nginx.

Adding header to Apache Server:

Edit .htaccess or /etc/apache2/apache.conf and add the following line:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
	Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Adding header to Nginx Server:

In your virtual host file (usually located at /etc/nginx/sites-available/default) add the following code

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

If you can not add header on your CDN:

There are some CDNs like Amazon S3 (at the time of writing) which would not let you add any header information. In such case, the best way is to serve the font files and font CSS file from your own domain instead of the CDN.

More Information on the issue:

More information can be found at the following links:

• Firefox doesn’t allow cross-domain fonts
• Serving Fonts from CDN

The post Serving Font from CDN – Dealing with CORS appeared first on WPQuark Knowledge Base.