This page has been robot translated, sorry for typos if any. Original content here.

Store web fonts in CDN

Хранение веб-шрифтов в CDN

As you know, to improve performance, statics should be stored in a CDN.

In particular, web fonts.

Unfortunately, web fonts stored in CDNs by default will not work in Firefox and Internet Explorer - CORS settings will be required for correct display. Below you can find the necessary code.

Apache configuration

Settings must be in .htaccess or httpd.conf :

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

Nginx configuration

Settings should be in nginx.conf :

 if ($ filename ~ * ^. *? \. (eot) | (ttf) | (woff) $) {
  add_header Access-Control-Allow-Origin *;
 }	

Access-Control-Allow-Origin configures CORS so that it is possible to receive font files from any domain.

Or you can list the domains separated by commas if you want to allow their retrieval from specific domains.

Or you can list the domains separated by commas if you want to allow their retrieval from specific domains.

How to check

To check the proper setting of the headers, you can use curl :

 $ curl -I https://some.cdn.otherdomain.net/media/fonts/somefont.ttf

Answer:

 # Result
 HTTP / 1.1 200 OK
 Server: Apache
 X-Backend-Server: developer1.webapp.scl3.mozilla.com
 Content-Type: text / plain;  charset = UTF-8
 Access-Control-Allow-Origin: *
 ETag: "4dece1737ba40"
 Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
 X-Cache-Info: caching
 Cache-Control: max-age = 604795
 Expires: Wed, 19 Jun 2013 16:22:58 GMT
 Date: Wed, 12 Jun 2013 16:23:03 GMT
 Connection: keep-alive	

If you see in the answer Access-Control-Allow-Origin : * - everything is fine.

The same strategy is used in Bootstrap CDN, so you can be sure that it is good.