Frontender Magazine

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

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

David Walsh
Автор:
David Walsh
GitHub:
darkwing
Twitter:
@davidwalshblog
Сaйт:
http://davidwalsh.name/
LinkedIn:
davidjameswalsh
Антон Немцев
Переводчик:
Антон Немцев
Сaйт:
http://frontender.info/
Twitter:
@silentimp
GitHub:
SilentImp
Skype:
ravencry

Комментарии (6 комментариев, если быть точным)

Автар пользователя
h4

Зафигачив

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

в nginx.conf мы получаем две проблемы: - заголовок добавится глобально на все хосты, обслуживаемые nginx - при обновлении nginx эта настройка может запросто слететь

Лучше всего вынести её в отдельный файл fonts_params и подлкючать в в sites-available/*.conf через include.

Автар пользователя
psdcoder

А еще можно просто в необходимый конфиг хоста добавить:

location ~* .(eot|ttf|woff)$ { add_header Aceess-Control-Allow-Origin *; }

Автар пользователя
Novitsky

При добавлении в конец файла httpd.conf этих строчек:

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

Apache не запускается.

От чего такое может происходить?

Автар пользователя
h4

@Novitsky лучше всего посмотреть в error_log.

Автар пользователя
Novitsky

В error.log прописалось следующее:

[Fri Oct 23 16:51:08.319343 2015] [mpm_winnt:notice] [pid 8464:tid 592] AH00422: Parent: Received shutdown signal -- Shutting down the server. [Fri Oct 23 16:51:10.350459 2015] [mpm_winnt:notice] [pid 7932:tid 128] AH00364: Child: All worker threads have exited. [Fri Oct 23 16:51:10.463468 2015] [mpm_winnt:notice] [pid 8464:tid 592] AH00430: Parent: Child process 7932 exited successfully.

Автар пользователя
iamstarkov

@Novitsky быстре ответ можно получить на спец форуме toster.ru