Skip Links

Blog

Posts tagged with "font replacement".

Switching from sIFR to Cufon

Mark

Mark

29 Apr 2009 08:38

I’ve always found sIFR frustrating to use (sorry Mike), typically having to fiddle with the end results to remove extra padding here or there which I could never find in my CSS. So on a recent project, when a colleague mentioned Cufon I thought I would give it a try.

The goals of the Cufon project sounded like exactly what I wanted – no plugins, compatibility with all major browsers, fast and close to zero configuration and after trying it, I would conclude that it’s achieved them.

The steps are really simple:

  • Take your font file and run it through their converter to create a javascript equivalent
  • Include the cufon.js file and the font file on your page
  • Call Cufon.replace(’_selector_’)

and you’re done.

There are a couple of extras I had to look up. Hover states aren’t supported by default as they have performance implications, so use { hover: true } as the options in the second parameter to the replace call. Also you need one of the standard javascript libraries if you want to use more than just element selectors. I added jQuery – hey presto.

The one drawback is that text isn’t selectable or at least not in the same way standard text is or sIFR text is but if it’s used for headings or similar, it’s ideal!

Tagged in: cufon, font replacement