Зберігання веб-шрифтів в 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, так що можна бути впевненим, що вона хороша.