Using custom fonts with CDN - setting CORS

Introduction

Please note that by default custom fonts requested from CDN will not work properly in some browsers. Custom fonts require that Cross-Origin Resource Sharing (CORS) is enabled.

CORS enabled

CORS enabled

CORS disabled

CORS disabled

How to enable CORS

Add the HTTP header Access-Control-Allow-Origin: * (allowing all domains to request the content) to all files on your origin with eot, ttf, otf and woff extension.

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

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

Our CDN honors all HTTP headers set on origin so in particular your custom fonts in the CDN cache will have the Access-Control-Allow-Origin: * HTTP header set and they will work in every browser.

After finishing with the above please note that you might need to purge your fonts from the CDN cache as they are cached with the old HTTP headers.

How to set MIME type

Please also ensure that you set the correct MIME type to your custom fonts on origin.

# Apache
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

# Ngnix
types 
{
    font/ttf ttf;
    font/eot eot;
    font/otf otf;
    font/woff woff;    
}

After finishing with the above please note that you might need to purge your fonts from the CDN cache as they are cached with the old HTTP headers.

How to check that CORS is enabled and MIME type is set

You can use curl tool and inspect HTTP response headers.

CORS enabled

curl -I http://12345.r.cdnsun.net/OpenSans.woff
Content-Type: font/woff
Access-Control-Allow-Origin: *

What next?

Read about the following topics.

Contact Us

  ______   __   __    ______  
 /_   _//  \ \\/ //  /_____// 
 `-| |,-    \ ` //   `____ `  
   | ||      | ||    /___//   
   |_||      |_||    `__ `    
   `-`'      `-`'    /_//     
                     `-`