CDN Glitches

Thanks for all the feedback on the first day running on a CDN. Several issues were noted and addressed.

The fonts have been restored. There were a couple of funny problems that occurred. Headlines are using Asap and body text is Almost Alike, two fonts available using the Google Web Fonts CDN.

The symbol font FontAwesome is, well, awesome. It’s included in the Canvas framework/theme that I’m using, The FontAwesome font is used as a source of small graphic symbols and icons for things like the Search magnifying glass () and the RSS icon(). Canvas embeds the font within their framework in the includes/fonts directories, but when the files are specified in the CSS files, they are referred to with a version number, as in src:url('includes/fonts/fontawesome-webfont.eot?v=3.2.1')

This doesn’t actually load a particular version of the file, but it means that caches will be invalidated and the file reloaded if the version number is changed. However, moving these files to a CDN threw some problems: the CDN is really an object store that returns a file if the name exactly matches the name under which the file is stored. So, the file “fontawesome-webfont.eot” doesn’t match one with “?v=3.2.1” appended to the name, and the CDN doesn’t return the file. [Update: I’ rethinking this. While I was getting “Aborted” error messages downloading the font, today it appears to be working, so this may be a misdiagnosis.]

The solution I chose was to locate the single line in canvas’ font-awesome.css.less file that specifies the source for the fonts, then override that file, using the custom.css file designed for just that purpose, and specify the font-awesome sources as the Bootstrap CDN source. See for their suggested invocation. Using the @font-face declaration of that file, added to the custom.css overrode the early declaration and loads the font, successfully, from the CDN.

No comments yet.

Leave a Reply

Powered by WordPress. Designed by Woo Themes

This work by Ted Roche is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 United States.