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 “;”:
W3TC font misconfiguration error – replace the “,” with “;”
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:
- Change “Forward Headers” from “None” to “Whitelist”
- Add “Origin” to the “Whitelist Headers”
- 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”)