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!

The post SSL and CloudFront CDN Support for WebFonts via .htaccess appeared first on Chris Gilligan » new media.