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

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

Как известно, для улучшения производительности статику лучше хранить в CDN.

В частности, веб-шрифты.

К сожалению, веб-шрифты хранящиеся в CDN по умолчанию не будут работать в Firefox и Internet Explorer — для корректного отображения потребуются настройки CORS. Ниже вы сможете найти необходимый код.

Конфигурация Apache

Настройки должны быть в .htaccess или httpd.conf:

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

Конфигурация Nginx

Настройки должны быть в nginx.conf:

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

Access-Control-Allow-Origin конфигурирует CORS так, чтобы было возможно получать файлы шрифтов с любого домена.

Или вы можете перечислить домены через запятую, если хотите разрешить их получение с конкретных доменов.

Или вы можете перечислить домены через запятую, если хотите разрешить их получение с конкретных доменов.

Как проверить

Чтобы проверить правильную настройку заголовков, можно использовать curl:

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

Ответ:

# 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	

Если увидите в ответе Access-Control-Allow-Origin: * — все отлично.

Эта же стратегия используется в Bootstrap CDN, так что можно быть уверенным, что она хороша.