Loading webfonts of Amazon CloudFront the right way

6/29/2012

When loading webfonts of Amazon's CDN Cloudfront, a problem arises in FF and IE9. The fonts are not rendered! This is because a header is missing and these browsers refuse to render them due to security reasons. The fix is really easy, add these lines to your .htaccess file:

 <FilesMatch "\.(ttf|otf|eot|woff|svg)$">
   <IfModule mod_headers.c>
     Header set Access-Control-Allow-Origin "*"
   </IfModule>
 </FilesMatch>

Then the next step is to invalidate the font files that are cached on the CDN (you can do this through the AWS control panel). Wait until CloudFront refreshes the files and voila, it will serve the webfonts with the Access-Control-Allow-Origin header set and FF and IE9 will render them normally!

21 Comments

Marc David link

1/14/2013 03:48:09 am

This "may" be the issue on my website as I use W3TC and Amazon Cloudfront. I've noticed the Rockwell Condensed Bold fonts don't seem to come down to users. It's in the CSS and such but it shows up on my browser as New Times Roman. Many web tests show that TTF file as a 404 error.

Could this be it?

awebdeveloper

1/14/2013 01:54:05 pm

Hi Marc,

That could certainly be it. Try looking at the headers of the TTF file when you request it directly from your site (not the CDN). If it doesn't have the Access-Control-Allow-Origin header, the header will be missing on the CDN as well (the CDN caches the headers, too) and that's why it's not working.

Good luck!

Marc David link

1/22/2013 12:08:59 am

For whatever reason, the fonts were missing from the W3TC folder. I kept seeing that in the error logs on my host. So I just uploaded them into that folder and the fonts appeared on the actual blog. Not sure how they didn't get there but the fix for me was to just upload them into the W3 Total Cache folder that the error logs said they were missing from when being called.

Brad

1/20/2013 04:44:48 am

Hey there, I know it's a long while since this post but I'd like to confirm that this does indeed work with Cloudfront and an external host (i.e. not S3). Thank you so much for this because I really didn't like the fact that I had to pull static fonts from my server especially in high traffic periods.

awebdeveloper

1/20/2013 12:53:31 pm

Hi Brad,

I can confirm out of first-hand experience that this works with CloudFront and an external host. I used Apache or nginx on my external host, can't remember exactly which one. Which software you use on the external host doesn't really matter, as long as you correctly set the Access-Control-Allow-Origin header, then CloudFront will just copy the header from there and your fonts will work. Here is an example .htaccess config snipper for Apache:

# Set ACAO header for fonts so that these are copied by CDN
# Otherwise webfonts break in FF and IE9+
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Note that mod_headers should be installed and enabled for Apache in order to make this work.

Brad

1/21/2013 01:10:04 pm

Oh ya, I got it to work. Not sure if I didn't come across clearly but I was just saying that the code in your post worked for me with an external host and Cloudfront. :D Just wanted to say thanks really.

awebdeveloper

1/22/2013 12:35:33 am

Thanks for the kind words!

jdigdog

9/30/2013 03:25:39 pm

The code seems to be standard when I enable W3TC.
But Cloudfront does not seem to be picking up my WOFF fonts.
External hosting, everything else seems to be getting picked up.
ACAO header is enabled on the WOFF files.

awebdeveloper

10/9/2013 03:29:55 pm

Maybe it's an SSL error? If you are requesting the page by HTTPS but the fonts are requested by (unsecure) HTTP, then the fonts won't be loaded.

jdigdog

10/9/2013 03:46:50 pm

Wish it was :(
Its all HTTP unfortunately.

awebdeveloper

10/9/2013 03:51:27 pm

Another idea: did you enable the ACAO header before or after making the first request from Cloudfront? I'm thinking that Cloudfront might be caching your old headers, try emptying the Cloudfront cache or rename the file to find out. (p.s. is the file extension in lowercase?)

jdigdog

10/9/2013 04:14:06 pm

After enabling the ACAO. Have just run an invalidation.... Same issue.
filename and extension all lower case.

jdigdog

10/9/2013 04:14:13 pm

After enabling the ACAO. Have just run an invalidation.... Same issue.
filename and extension all lower case.

awebdeveloper

10/9/2013 05:35:17 pm

Can you verify the ACAO header is present by inspecting the headers returned by the server? This header should be present:

Access-Control-Allow-Origin: *

jdigdog

10/9/2013 05:54:37 pm

Accept-Ranges:bytes
Access-Control-Allow-Origin:*
Cache-Control:max-age=2592000
Connection:Keep-Alive
Content-Length:26780
Content-Type:application/font-woff
Date:Thu, 10 Oct 2013 07:52:07 GMT
ETag:"1751ecf-689c-4d7a4ddb3d040"
Expires:Sat, 09 Nov 2013 07:52:07 GMT
Keep-Alive:timeout=5, max=98
Last-Modified:Mon, 11 Mar 2013 11:56:41 GMT
Server:Apache
Vary:Accept-Encoding,User-Agent

awebdeveloper

10/9/2013 06:02:13 pm

Which browser and browser version are you using?

jdigdog

10/10/2013 08:14:08 am

Chrome Version 30.0.1599.69 m

and IE 10.0.9200
which gets served the font in a .eot format (ACAO *) MIME type applications/vnd.ms-fontobject

awebdeveloper

10/10/2013 03:18:58 pm

Hmm, I'm running out of ideas. Was the header you posted from the webserver or from CloudFront? (In case you posted your webserver's, can you show me CloudFront's headers, too, please?)

jdigdog

10/10/2013 03:26:01 pm

Response is from the web server for the fonts. Its caching pretty much everything else.

Cloudfront response for an image request on my website:

Accept-Ranges:none
Age:950284
Cache-Control:max-age=864000, must-revalidate
Connection:keep-alive
Content-Length:321533
Content-Type:image/jpeg
Date:Fri, 20 Sep 2013 05:15:30 GMT
Expires:Mon, 30 Sep 2013 05:15:31 GMT
Last-Modified:Fri, 20 Sep 2013 05:15:31 GMT
Server:Apache
Vary:Accept-Encoding
Via:1.1 c2cbb71372e7073fd23b1ebb5248d6a8.cloudfront.net (CloudFront)
X-Amz-Cf-Id:jJQPXqXMc_c5wFrXcMPdG9wu8kkRZc8LtzSp3VJngGyJ6_vfi5vi2A==
X-Cache:Hit from cloudfront

awebdeveloper

10/10/2013 03:35:24 pm

Could you give the CloudFront headers for the WOFF font URL specifically?

jdigdog link

11/14/2013 05:58:41 am

Umm, the response is not coming from Cloudfront for the WOFF files -> that's the issue. All the other requests are are coming back from Cloudfront.

Your comment will be posted after it is approved.

Loading webfonts of Amazon CloudFront the right way

Leave a Reply.

Author

Archives

Categories