Introduction
When custom fonts are loaded from another domain, browsers expect a Cross-Origin Resource Sharing (CORS) response header. CDN Pull and CDN Static Push services can provide it through the CORS Fallback option.
Enable CORS Fallback
Enable CORS Fallback in your CDN service settings. When a response does not include Access-Control-Allow-Origin, CDNsun adds Access-Control-Allow-Origin: *. This resolves font-loading errors caused by a missing CORS header. If the response already includes the header, CDNsun preserves its value.
Set CORS on your origin
Alternatively, 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 "*";
}
CDNsun preserves the Access-Control-Allow-Origin header from your origin, even when CORS Fallback is enabled.
If you are using CDN Storage, please refer to Storage | Custom HTTP Headers for instructions on setting up CORS.
If you changed response headers on your origin, you might need to purge your fonts from the CDN cache to replace 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
The response should contain the following headers. The example shows the value added by CORS Fallback; if your origin sets the CORS header, its value is preserved instead.
curl -I https://cdn.mycompany.com/OpenSans.woff
Content-Type: font/woff Access-Control-Allow-Origin: *
What next?
Read about the following topics.