Usually we try host our custom font into Amazon S3, cached by Cloudfront and use it into our website. If you can’t load your font using font face from Firefox / IE, this posting is match for your problem. This problem mostly occur on Firefox and IE because this browser have restriction on Cross Origin Resource Sharing which in short way called “CORS” and no “access control allow origin *” headers. But why this problem didn’t occur in Chrome? Because in Chrome, it’s doesn’t care about CORS rule which in other word, Chrome will allow resource from another domain.
In a short description, to solve font-face problems in Firefox and IE, yours font must be have this headers:
1 | Access-Control-Allow-Origin header * |
Unfortunately, eventhough you set the CORS in Amazon S3 to allow origin headers, but it wouldn’t solve the problem.
Because right know, it’s still doesn’t have option to add “Access-Control-Allow-Origin” header.
Results when we access font but hosted into amazon S3 :
1 | curl -I https://s3-ap-southeast-1.amazonaws.com/…./cartogothicstd-book-webfont.ttf |
And the results is :
1 2 3 4 5 6 7 8 9 10 | HTTP/1.1 200 OK x-amz-id-2: aG31DY460+44VuCase3ditUWONuPsHAnvpgaAuklALYvx0VcEQmvfRLKCV+bA x-amz-request-id: C73BFE5D21FA3435 Date: Fri, 11 Jan 2013 03:04:07 GMT Last-Modified: Tue, 08 Jan 2013 13:36:29 GMT ETag: "1936f8de1d07a1cbe6b1d82313803d5c" Accept-Ranges: bytes Content-Type: application/vnd.ms-fontobject Content-Length: 72664 Server: AmazonS3 |
The other thing we should know that Cloudfront have no capability to add header into the file that being cached. That’s why putting font files into Amazon S3 and cached them with Cloudfront will not solving the problems at all.
1. The solution instead of putting your font into S3, you can put it into your Amazon EC2.
Make sure your fonts can be accessed from browser. Then we will inject the ACAO header into this files from our webserver. In this case, I use NGINX and i put the files under “/static/” path of my website.
Here is how to add the headers.
1 2 3 | location /static/ { add_header Access-Control-Allow-Origin "*"; } |
Restart the NGINX server and test using CURL. It’s supposed to have the ACAO headers now, eg:
1 2 3 4 5 6 7 8 9 10 11 | curl -I "http://yodi.sg/static/cartogothicstd-book-webfont.ttf" HTTP/1.0 200 OK Content-Type: application/octet-stream Content-Length: 72664 Connection: keep-alive Server: nginx/1.2.5 Date: Wed, 16 Jan 2013 10:57:59 GMT Last-Modified: Mon, 16 Jan 2012 06:26:38 GMT Expires: Wed, 16 Jan 2013 11:57:59 GMT Cache-Control: max-age=3600 Access-Control-Allow-Origin: * |
2. Set the Cloudfront pointed into your static
The special things about Cloudfront here is it have capability to cache the file and the HEADER as well the origin file.
So, we create a new distribution, set the DNS into our domain (like: yodi.sg). After the distribution deployed, we can go to Behaviors and create a new behavior that cache based on path pattern “static/*”. Now Cloudfront will cache your fonts from your “static” path in the website.
1 | curl -I http://343svjwn21115.cloudfront.net/static/cartogothicstd-book-webfont.ttf |
And the results is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | HTTP/1.0 200 OK Content-Type: application/octet-stream Content-Length: 72664 Connection: keep-alive Server: nginx/1.2.5 Date: Wed, 16 Jan 2013 10:57:59 GMT Last-Modified: Mon, 16 Jan 2012 06:26:38 GMT Expires: Wed, 16 Jan 2013 11:57:59 GMT Cache-Control: max-age=3600 Access-Control-Allow-Origin: * Accept-Ranges: bytes Age: 3054 X-Amz-Cf-Id: Po-PEv6sNweo77F8ru8XMvBgknjgamW9qXtY1pDo8mx3F7KbMIfQYg== Via: 1.0 da0f77d4d040414fc934330bb23a43db26.cloudfront.net (CloudFront) X-Cache: Hit from cloudfront |
Now you can use font-face from Cloudfront and all your font not loaded in IE / Firefox shall gone! 😀