Changing the font of your website’s headings can make your website look a lot better. Unfortunately, your choice of font is pretty limited, because there’s only a small number of web-safe fonts that you can use.
But there are ways around this problem. Traditionally, web designers created images of headings and used these instead of text, but this approach has some serious disadvantages.
- It’s difficult for a standard website admin to change the heading in a hurry because it needs to go back to the graphic designer
- The heading cannot be read by search engines, which tend to read text only.
- If the page’s background colour changes, the image might still have its original background colour and won’t blend in with the new page colour.
So we need a way to write text in the traditional way but using fonts that are normally not available.
Enter Cufon.
Cufon is a text-replacement tool for your website that allows you to use any font you like (following the licensing agreements for commercial fonts of course).
The GOOD:
Cufon’s a great alternative to SIFR – which is a flash based text-replacement and font-family embedding which is relatively new but has display issues on different browsers and operating systems.
Cufon uses canvas and VML which allows scriptable rendering of 2d vector shapes and images, It basically turns your font file into a set of shapes and displays them how you tell it to in your style sheet (CSS). It’s perfect for headings and great for tying your brand font into your web design, allowing for better brand continuity.
The Bad and the Ugly:
We recently used cufon on the new Need A Nerd website. Cufon was replacing the headings but displaying some characters in funny ways; the dash (-) was becoming an X and some quote marks were disappearing entirely.
The problem was basically two things: The font and the text editor in the CMS (Content Management System).
The font:
Not all fonts are equal, some have a lot of glyphs and some don’t, this can result in some characters displaying incorrectly, or not at all. You can get around this by finding a similar font with more characters and glyphs, and remembering to tick the glyph boxes when making your cufon font.
The text editor in the CMS:
Since the majority of our sites are built on Content Management Systems, our clients can edit their content as they wish. But that also comes with its downside – like pasting information from emails, Word or similar – when you do this, it copies over a heap of sloppy syntax that can make your page look abnormal or it could crash your site. Not great!!
There’s an easy way to get around this, and that’s by copying your info into the HTML area of your text editor first. Easy and clean. This helps cufon recognise what’s being processed and what isn’t without extra syntax.
All in all, Need A Nerd’s font issue was a charming reminder of the complexities that web fonts can throw at you. Cufon manages as best it can with the font you give it, it doesn’t like pasted information from office or similar, and for the HTML-coders out there – your HTML page needs to be UTF-8 character encoded.
As font-family replacement becomes more common I’ll review the new tools and discuss their good, bad and ugly sides as well. It looks to be the next thing for online font use, but could also pose more issues. We’ll soon see…
