Cufon Dynamic Heading Font Replacement

We've recently been playing with the latest font replacement contender, Cufon, and have found it most satisfying!

One of the core frustrations of web design and development is the lack of choice of fonts. In order to create a website that charms the search engines, all text should be proper, tangiable text.

A few years ago people would create there own pretty headings by simply inserting an image utilising the font of their choice. The main problem with this is Google cannot read images (we can say this for the sake of arguement now, although I expect this will soon change) and if it cannot read them it cannot index them. For a host of reasons, headings are one of the most powerful tools in a developers arsenal and should be used correctly, using the correct XHTML markup and containing appropriate text-based content. Because we are forced into this corner we are given very little choice but to use only web-acceptable fonts of which there are pitifully few.

...until font replacement technology came along. This is where you attach a special bunch of scripts to your web pages and they rummage through your text, finding headings and replacing them with images. The great thing is they only do this when a user looks at the pages using a browser; when Google comes along and has a look at the page it sees nothing but good wholesome text! This truly is the best of both worlds!

Up until recently there were only a couple of main contenders: the leader by a long way was sIFR (Scalable Inman Flash Replacement) and somewhere behind was P+C DTR (Until recently this was simply called Dynamic Text Replacement).

sIFR uses a combination of Flash and Javacript to replace text. The problem we have generally found with this is that the system is awkward to implement and the font sizes are very difficult to control. In all, we only used this system a couple of times because the work involved seemed excessive to get the desired results.

P+C DTR using PHP, CSS and javascript, in my opinion, felt like a better solution - font sizes and colours are controllable in a very positive way, only we found that in some situations (mainly with long titles that needed to wrap onto the next line) there were long delays as the pseudo-images dropped into place. There was also quite a lot of editing and code-tweaking to be done to get the thing implemented.

Then along came Cufón. By using a cunning combination of javascript, VML, the HTML5 element canvas, and a little dash of hocus pocus the creators have come up with a system that is quick to implement, powerfully versatile, robust and reliable.

The only quirk I have found so far was the fact that your headings will be indented if there is whitespace at the beginning of your heading tags, whereas normal XHTML ignores this. It was almost like there was a default text-indent, padding or margin on these elements. This problem was only an issue in Firefox and Safari (in the browsers I checked) and was solved by trimming the whitespace of the heading text.

Anyhow... Cufón... quick, reliable, easy, neat, robust, tidy... approved!