Webfont não será carregado através do CloudFront mesmo com o Access-Control-Allow-Origin definido no servidor

Question

Eu quero usar o cloudfront como um CDN para acelerar um site. Eu tenho todos os JS & CSS funcionando bem, mas estou preso em alguns webfonts que não serão carregados no CDN.

Eu configurei o arquivo Apache VHOSTS com o Access-Control-Allow-Origin usando a seguinte sintaxe:

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

Eu coloquei o domínio correto para o Access-Control-Allow-Origin ou deveria ser o link ? Nesse caso, o link é o ponto CNAME do DNS da nuvem.

Quando enrolo, obtenho títulos como este:

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==

Mas quando olho para o mesmo arquivo no Firebug, não vejo o cabeçalho Access-Control-Allow-Origin.

As fontes são chamadas em uma folha de estilo dessa maneira

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

Esta folha de estilo é então importada para outra usando @import url("../fonts/titillium/stylesheet.css");

Li vários posts no CORS e na cloudfront e, até onde sei, as configurações estão corretas. O que estou perdendo?

    

Answer 1

Então, para corrigir o problema acima, é necessário duas coisas:

1. Access-Control-Allow-Origin convertido do domínio para *
2. Criado uma nova distribuição do CloudFront, pois era quase impossível invalidar as fontes dentro do cache

Depois disso, tudo funcionou bem.