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.
How to Enable CORS
Add the HTTP response header Access-Control-Allow-Origin: * (allowing all domains to access the content) to all files on your origin with the .eot, .ttf, .otf, and .woff extensions. Below are configuration examples for Apache and Nginx.
# 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 response headers set on the origin. As a result, your custom fonts in the CDN cache will include the Access-Control-Allow-Origin: * header, ensuring they work in every browser.
If you are using CDN Storage, please refer to Storage | Custom HTTP Headers for instructions on setting up CORS.
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
Ensure that your origin server sets the correct MIME type using the Content-Type HTTP response header for custom fonts. Below are configuration examples for Apache and Nginx.
# Apache
# Custom fonts
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
# HLS streaming
AddType application/vnd.apple.mpegurl .m3u8
AddType video/MP2T .ts
# Ngnix
types
{
# Custom fonts
font/ttf ttf;
font/eot eot;
font/otf otf;
font/woff woff;
# HLS streaming
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
If you are using CDN Storage, please refer to Storage | Custom HTTP Headers for instructions on setting up MIME type.
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
When CORS is enabled curl response will contain the following two HTTP response headers.
curl -I https://cdn.mycompany.com/OpenSans.woff
Content-Type: font/woff Access-Control-Allow-Origin: *
What next?
Read about the following topics.