We accelerate websites

15 days free trial Sign up

Media Acceleration Stream to the world

15 days free trial Sign up

Extensive Network Excellent world coverage

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.

 
  ______    ______   __   _      ___    
 /_   _//  /_   _// | || | ||   / _ \\  
 `-| |,-    -| ||-  | '--' ||  / //\ \\ 
   | ||     _| ||_  | .--. || |  ___  ||
   |_||    /_____// |_|| |_|| |_||  |_||
   `-`'    `-----`  `-`  `-`  `-`   `-` 
                                        
Europe
  • Amsterdam
  • Athens
  • Baku
  • Bucharest
  • Budapest
  • Chelyabinsk
  • Dubai
  • Dublin
  • Frankfurt
  • Helsingborg
  • Helsinki
  • Istanbul
  • Karlskrona
  • Khabarovsk
  • Kharkov
  • Kiev
  • Lisbon
  • London
  • Lvov
  • Madrid
  • Moscow
  • Oslo
  • Polevskoy
  • Rostov-on-Don
  • Saint Petersburg
  • Stockholm
  • Trondheim
  • Zagreb
America
  • Arlington
  • Atlanta
  • Chicago
  • Dallas
  • Denver
  • Green Bay
  • Los Angeles
  • Miami
  • Montreal
  • New York
  • Phoenix
  • Portland
  • Provo
  • Queretaro
  • Reston
  • Sacramento
  • San Jose
  • Sao Paulo
  • Seattle
  • Toronto
  • Washington
Contact
  • e-mail: info@cdnsun.com
  • skype: cdnsun.com
  • phone: +1 844 300 9206
  • phone: +420 776 256 872
Blog Twitter LinkedIn Facebook CrunchBase Google+ / Google plus Foursquare Pinterest