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:
Access-Control-Allow-Origin
from the domain to *Once this was done, it all worked fine.