A little resurfacing work

The theme I started this blog with was one of the many off the shelf ones available out there as I didn’t have the time to make one of my own. It was about time I got round to it, so here it is. It’s nothing too fancy or exciting but hopefully it’s not too offensive!

One of the more interesting elements of building the theme was using Cufón for the heading text. Despite the existence of things such as sIFR and it’s variants and alternatives, I never really got into the idea of font embedding, but with Cufón and Typeface.js gaining notoriety of late, I thought it might be worth a try.

The way both of these options work is to display VML paths, representing the glyphs of a font, via a JavaScript renderer which replaces the standard HTML textual elements you choose. These paths are contained in a JavaScript file which include in your page like any other and which is generated by uploading your chosen font to the converters on their respective sites. While Cufón has been garnering a lot more “big” name and popular attention lately, I like an underdog so had intended to try typeface.js first, but it seems that it currently only supports TTFs. The font I had chosen for my headings, Serif Beta, was only available as an OTF,  so Cufón it was.

Easy enough for an idiot like me

Usage is fairly simple, and made even simpler through the inclusion of jQuery first—Cufón will use jQuery’s selector engine to allow to very easily pick out the elements to replace. So, to replace all h2 elements, you can do something like this:

1
Cufon.replace('h2');

To replace all h2′s and all li’s with a class of ‘fancy-text’:

1
Cufon.replace('h2')('li.fancy-text');

The full range of jQuery’s selectorization is available.

The one problem I’ve found so far is an occaional slight “jump” where the original text will occasionally appear in it’s CSS defined font before the JS has loaded and pop into it’s Cufóned form once the loading is complete. This is apparently mitigated by have the Cufón call take place at the very end of the page which is why I’m called the…

1
Cufon.now();

…function right before the closing body tag of the page footer, whereas I’d normally prefer to had that inside a domready jQuery event, since I’m using jQuery anyway. And while it does still occasionally happen, it only seems to be occasional so it’s a small price to pay.

Hope you like it

Typography aside, I’m reasonably happy with the theme. It’s pretty simple, like it’s creator, which is what I wanted, so it should afford a bit of flexibility over time if I want to add things to the site. If you have any comments or suggestions, please leave them below. Just in case you’re new to blogs.