WordPress, W3-Total Cache and the Cloudfront font CORS issue

If you host your blog via WordPress, you certainly would have installed the W3TC plugin. I only recently noticed that my blog configuration showed a number of errors. It started off with CORS errors as part of the new theme fonts.

I am not sure if the below was my configuration-error in W3TC, or was an initial bug in the plugin, but it is easy to fix – notice the invalid file-extension separators as commas? Replace them with semi-colons “;”:

The above resolved the uploading issue of my *.woff files into my CDN (Amazon S3).

The second issue is a bit more complex, as recent changes the Chrome introduced CORS handling which in essence prevented my blog (hosted via www.naschenweng.info) to access my fonts on my S3 buckets (via content#.naschenweng.info). While W3TC does have the necessary .htaccess configuration, you will still need to update S3 configuration to allow CORS handling – this is done via changing Amazon S3 and Amazon Cloudfront settings.

Access your S3 settings, click on your Bucket and then on “Properties” – click on “Edit CORS Configuration”:

In the next popup, adjust the CORS settings to your subdomain and then save the changes:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
 <CORSRule>
 <AllowedOrigin>http://*.naschenweng.info</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <MaxAgeSeconds>3000</MaxAgeSeconds>
 <AllowedHeader>Content-*</AllowedHeader>
 <AllowedHeader>Host</AllowedHeader>
 </CORSRule>
</CORSConfiguration>

The next step is to go into your Cloudfront settings, and edit your Distribution Settings (click on the Distribution ID link and then on “Behaviours”):

 

The only three changes required are:

1. Change “Forward Headers” from “None” to “Whitelist”
2. Add “Origin” to the “Whitelist Headers”
3. Make sure that “Use Origin Cache Headers” is checked

The last change is to invalidate your cached fonts – to do this go into your Cloudfront Distribution settings and then select “Invalidations”. There you create a new validation and you configure the object path pointing to your theme font files (you can use wild-cards such as “/themes/hueman/fonts/*.woff”)