I recently upgraded my WordPress theme to WooThemes Canvas 5.x, and I found that some of the icons were not rendering, but were showing a letter or integer instead. I dug into the code and found that these icons are now delivered via @font-face webfonts.
Meanwhile, I’m working on a client’s e-commerce site with Google WebFonts and a custom webfont to display the Rupee symbol (Indian currency).
Though the fonts were uploading properly to the CloudFront CDN, and were properly referenced in the minified CSS on the CDN, they were not rendering in Firefox or IE, and the SSL pages on the client’s site were throwing security warnings.
At first I thought this might be a W3 Total Cache issue, because upgrading to the latest development release had solved some other CSS issues. However, it turned out to be a browser security issue.
Evidently this is a security measure to prevent cross-site attacks, but you can allow this via Apache mod_headers, to allow your specific CloudFront (or other) domain, specified in the .htaccess file.
Some sites have suggested using “*” wildcards to allow all domains… but obviously this is a security issue: with this Header, you are granting JavaScript clients basic access to your resources. I recommend you only allow access to the specific CDN domains you require. Do this with a comma separated list, in double quotes.
# BEGIN CDN Cross-Site for Webfonts
<IfModule mod_mime.c>
AddType font/ttf .ttf
AddType font/eot .eot
AddType font/opentype .otf
AddType font/x-woff .woff
</IfModule>
<FilesMatch "\.(svg|ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "fonts.googleapis.com,{{yourdistro69}}.cloudfront.net"
</IfModule>
</FilesMatch>
# END CDN Cross-Site for Webfonts
Yay! Delicious webfonts, even on SSL pages via CDN!
Hi Chris, Thank you for your article. I am using Bootstrap fonts in my theme and the bootstrap icons disappeared from my site when I enabled Cloudfront. Unfortunately this method didn’t work for me. Any recommendations? is there anything else it could be?
Victoria, first you should verify your site is running on Apache with mod_headers support. If so, you should be able to add your sub.domain.tld to Header set Access-Control-Allow-Origin.