Loading fonts from CDN

When you are loading fonts (or fonts with icons) you might have an issue with some browsers that require CORS (Cross-Origin Resource Sharing) policy to match your page header with the font location.

This is all OK if your font is loading from the same domain as your website has. But, if you use CDN or you are loading fonts from some other server, the domain for the font URL and your website will not match, and CORS restriction will prevent the browser to load this font. To fix this issue, you need to add a header in your page response to allow the loading of fonts from other domains.

Apache Server

If you use the Apache server, you need to add this to your Apache http.conf file, or your website .htaccess file. Htaccess file is located in your website root folder.

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

NGINX Server

If you use the NGNIX server, you need to add this to your NGNIX config file.

if ($filename ~* ^.*?\.(eot)|(ttf)|(svg)|(otf)|(woff)|(woff2)$){
    add_header Access-Control-Allow-Origin *;
}

In both cases, this will allow all domains for loading fonts. If you want to limit this to only some domains, you need to replace * with a comma-separated list of domains.

Some CDN’s are adding CORS related header automatically, but if that is not the case with your CDN (or your custom domain), you need to add a CORS header.