Cross-Origin Resource Sharing (CORS)

If you're experiencing an issue with missing fonts or your font files being blocked by the browser, you need to add the Access-Control-Allow-Origin header to your font files.

The easiest way to solve this is by enabling the "CORS origin header" feature in your CDN panel.

Other methods include configuring the correct header on your Origin server:

APACHE

Make sure you have enabled "mod_headers" in your Apache config
Add the following piece of code into your .htaccess file:

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

NGINX

Add this to your Nginx configuration file (usually under /etc/nginx/nginx.conf )

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

IIS 7

<?xml version="1.0" encoding="utf-8"?>
 <configuration>
  <location path="media/css/font">
   <system.webServer>
   <httpProtocol>
    <customHeaders>
     <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
   </httpProtocol>
  </system.webServer>
 </location>
</configuration>

After you do this update on your origin, please run a purge all on your CDN Resource and wait a few minutes - then the problem should be solved.