ВОЙТИ

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

Последние изменения: 05.05.2016
добавить в избранные

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

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

Добавьте в файл .htaccess или httpd.conf, предпочтительно в начале файла:

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".
<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

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

Добавьте в секцию location файла nginx.conf:

location ~ \.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$ {
           add_header Access-Control-Allow-Origin "*";
}

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

После этого нужно полностью очистить кеш вашего ресурса в личном кабинете. Читать подробнее о очистке кеша.

Пожалуйста, убедитесь, что вы установили правильный MIME type для пользовательских шрифтов на сервере-источнике.

.htaccess or Apache/Nginx config

# Apache
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

# Ngnix
types 
{
    font/ttf ttf;
    font/eot eot;
    font/otf otf;
    font/woff woff;    
}

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

$ curl -I http://example.ru/media/fonts/somefont.ttf

# Result
HTTP/1.1 200 OK
Server: Apache
Content-Type: text/plain; charset=UTF-8
Access-Control-Allow-Origin: *
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: * — настройка прошла успешно.

нет комментариев