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 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.