Назад | Перейти на главную страницу

Webfont не загружается через CloudFront, даже если на сервере задано Access-Control-Allow-Origin.

Я хочу использовать облачный интерфейс в качестве CDN для ускорения работы сайта. У меня все JS и CSS работают нормально, но я застрял на некоторых веб-шрифтах, которые не загружаются из CDN.

Я установил файл Apache VHOSTS с Access-Control-Allow-Origin используя следующий синтаксис:

Header always set Access-Control-Allow-Origin "*.example.com"

Правильно ли я ввел домен для Access-Control-Allow-Origin или должен быть http://www.example.com? В таком случае http://cdn.example.com - это точка CNAME для облачного DNS.

Когда я завиваюсь, я получаю такие заголовки:

HTTP/1.0 200 OK
Content-Length: 41012
Connection: keep-alive
Date: Sun, 09 Jun 2013 20:59:30 GMT
Server: Apache/2.2.22 (Ubuntu)
Last-Modified: Fri, 04 May 2012 12:36:06 GMT
Accept-Ranges: bytes
Access-Control-Allow-Origin: *.example.com
Age: 1805
Via: 1.0 cbe4bca697a4e3585803757de75edba7.cloudfront.net (CloudFront)
X-Cache: Hit from cloudfront
X-Amz-Cf-Id: 2im15Ds6Vk81kxdZKtPh7w0JUjW9qyPMgFbnXzrN_RfxJCkeyOjEbg==

Но когда я смотрю тот же файл в Firebug, я не вижу заголовка Access-Control-Allow-Origin.

Шрифты вызываются в таблице стилей таким образом

@font-face {
 font-family: 'TitilliumRegular';
 src: url('TitilliumText1.eot');
 src: local('Titillium Regular'), local('Titillium-Bold'), url('TitilliumText1.ttf') format('truetype');
}

Затем эта таблица стилей импортируется в другую с помощью @import url("../fonts/titillium/stylesheet.css");

Я читал различные сообщения о CORS и Cloudfront, и, насколько я могу судить, настройки верны. Что мне не хватает?

Итак, чтобы исправить вышеуказанную проблему, потребовались две вещи:

  1. Преобразованный Access-Control-Allow-Origin с домена на *
  2. Создан новый дистрибутив CloudFront, так как было практически невозможно сделать недействительными шрифты в кеше.

Как только это было сделано, все заработало.