Storing web fonts in CDN

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

As you know, to improve performance, it is better to keep the statics in the CDN.

In particular, web fonts.

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

Configuring Apache

The settings must be in .htaccess or httpd.conf : 

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

Nginx Configuration

The 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 them from specific domains.

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

How to check

To check the correct 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 the Bootstrap CDN, so you can be sure that it is good.