Cufón

I was struggling with sIFR yet again this morning, an odd WSOD in IE7 and other problems. John Haas showed me Cufón as a replacement, and I was quickly impressed with its potential. The project promises cross-browser compatibility with no plug-ins (bye, bye, Flash!), as well as being fast and easy.

Image Replacement with Cufon!

So I gave it a whirl. At first, I opened a feature request at the Dynamic Rendering module to add support, at the same time digging into the module to see what I would need to add for this new plugin.

However, in the end, I decided the approach was too heavy handed. All I needed to do was add a couple of (very small) scripts to the theme.

First, you need to download the cufon-yui.js script. Then you'll take your TTF or OTF font and run it through the provided generator, resulting in a small (<26kb) script that embeds your font (such as A_Charming_Font_400.font.js in this example).

I just dropped the required javascripts into the theme folder, and modified the theme's info file:

  scripts[] = cufon-yui.js
  scripts[] = A_Charming_Font_400.font.js
  scripts[] = mytheme.cufon.js

And finally drop something like the following in the new mytheme.cufon.js script referenced above. (Just use jQuery selectors for this part.) You can look in the generated javascript if you're not sure what fontFamily to replace.

  if (Drupal.jsEnabled) {
    $(document).ready(function() {
      Cufon.replace('h2.title', { fontFamily: 'A Charming Font' });
      Cufon.replace('#big-title', { fontFamily: 'A Charming Font' });
      // Note you can add other generated fonts as well, such as below...
      Cufon.replace('#fancy-title', { fontFamily: 'Some Other Font' });
    });
  }