Cufon

One of my current clients is a comic book artist and illustrator and requested that the typeface used on his website was his own. After explaining the pitfalls of using custom fonts on the web he was still adamant that the text on the website should be in his own handwriting and so I set about researching the many different ways of providing custom web fonts and waited for client to send over the file containing his hand written alphabet.

In the past I might have jumped straight on sIFR but I’ve recently been seeing a lot of Javascript libraries that seem to do a great job without the need for Flash. My main criteria for what library to use were the ability to use a custom font file, ease of use and time.

The two libraries I thought had potential were Typeface.js and Cufon. Both allow font files to be uploaded and converted and both seemed pretty straight forward. However when i came to upload and convert my the font to Typeface.js I came across some problems with the font format.

Cufon would have been my second choice. It looks very good but the inability to select the replaced text and the  massive amount of un-semantic markup that is used to display the custom font made me cringe a little. However it did allow me to upload and convert my custom font file and is VERY easy to use.

A couple of things that caught me out were:

Hover wasn’t working when Cufon was used to replace text in <a> tags. This is easily fixed by passing an options object to Cufon.replace

Cufon.replace('a', {hover: true});

If you update the DOM using Javascript and want your text to stay “Cufon’d” you need to add a call to

Cufon.refresh()

after you’ve updated the DOM

Advertisements

About distinctinteractive

I graduated 3 years ago from the University of Huddersfield with a 2:1 BA in Interactive Multimedia. After leaving University i worked for a small company in Huddersfield (Offroad Code) mainly helping to maintain a large travel company website. I am currently freelancing as Distinct Interactive. Follow me on Twitter @jimmckerchar
This entry was posted in Random Stuff. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s