Webfont won’t load through CloudFront even with Access-Control-Allow-Origin set in the server

amazon-cloudfrontapache-2.2

I want to use cloudfront as a CDN to speed up a site. I've got all the JS & CSS working fine but I'm stuck on some webfonts which won't load from the CDN.

I've setup Apache VHOSTS file with the Access-Control-Allow-Origin using the following syntax:

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

Have I put in the correct domain for the Access-Control-Allow-Origin or should it be http://www.example.com? In this case http://cdn.example.com is the CNAME point to the cloudfront DNS.

When I curl I get headings like this:

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

But when I look at the same file in Firebug I don't see the Access-Control-Allow-Origin header.

The fonts are called in a stylesheet in this manner

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

This stylesheet is then imported into another using @import url("../fonts/titillium/stylesheet.css");

I've read various posts on the CORS and cloudfront and as far as I can tell, the settings are correct. What am I missing?

Best Answer

So to fix above problem required two things:

  1. Converted Access-Control-Allow-Origin from the domain to *
  2. Created a new CloudFront distribution as it was nearly impossible to invalidate the fonts within the cache

Once this was done, it all worked fine.