special

This webpage has been robot translated, sorry for typos if any. To view the original content of the page, simply replace the translation subdomain with www in the address bar or use this link.

Хранение веб-шрифтов в 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, так что можно быть уверенным, что она хороша.


Created/Updated: 25.05.2018