Cufón, an Alternative to sIFR for Image Replacement

Share this

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' });
    });
  }
That's it! No flash required, no "flash of screen" associated with sIFR. It just works. (And did I mention fast?)

Comments

Babydoll's picture

Issues ?

about few issues:
Copy and paste doesn't always work... But do we really need it ?
Also when cufon converted text is made a link, IE7 allows to click on the letters only (whitespaces - like i.e. inside of O, 0 ets, or gaps between letters are unlinked. With thin fonts it makes it difficult really)
I am still working on workaround.
Copyright issue - majority of fonts have their free version - easy to overcome.

Other than that, it is great, and caters perfectly for all my needs. Even works ok with IE6..
I'd defo. reccomend it.

Anonymous's picture

collapsible fieldsets bug

I've noticed that when Cufón is activated in Drupal 6.1.3 all my
collapsible fieldsets are expanded and the toggle control to expand/
contract is unpredictable. There seems to be a conflict with
jquery.js and Cufón are loaded together. I don't think this problem is
specific to Drupal version 6.1.3 but that's what I'm running...

To be more specific, I'm referring to the collapsible fieldsets that
appear on post/edit content pages and elsewhere in the Drupal core..

David Eads's picture

Cufon module in the wild

I released a Cufon module today that provides a minimalistic implementation for Drupal (it searches your theme folder and sites/all/libraries + sites//libraries ala WYSIWYG for font definitions and provides a dead simple selector / font configuration system).

It uses the approach recommended by the latest usage guide, which as Peach pointed out, explicitly recommends NOT initializing Cufon on document ready.

Hopefully this doesn't get me on the duplicated modules wall of shame. I don't personally see a big problem with having multiple implementations for multiple methods (especially because mixing approaches to text replacement seems highly unlikely -- I assume most sites will pick one and stick with it), and I've had good luck of some of the others (especially Signwriter).

tileeater's picture

Step #4 in module instructions

I'm a little unclear on step #4 in your notes:
"Configure Cufon by associating a font family with a jQuery selector in admin/settings/cufon."

can you give an example of a selector?

Anonymous's picture

Cofon module instructions

Yes!
Please give us an example of how to write the JQuery selector in admin/settings/cufon.
I installed the module, scripts, font, and all but I can't get it to work.

Thanks!

Anonymous's picture

If you want to replace the

If you want to replace the first, second, and third level headers, and your entire body with cufon, your selector to enter into the Drupal cufon module would be:

h1,h2,h3,body

Anonymous's picture

collapsing fieldset issue

have you noticed the fieldsets are all expanded on admin pages? and the toggle function is wacky?

tileeater's picture

Tried your module, fieldsets

Tried your module, fieldsets are still not collapsing. any ideas?

David Eads's picture

Good catch, please file a bug report on Drupal.org

I just noticed that part of the Views UI seems to be adversely affected by the presense of Cufon as well. It seems that Cufon is messing up visibility toggling, but at the moment, I'm strictly guessing.

That said, you should post this in the Cufon project issue queue, and not clutter up a thread about Mr. Winborn's approach (which is perfectly sound) with problems in my code.

tileeater's picture

Submitted bug

You can find this report here: http://drupal.org/node/520210
Also, do you think it will be helpful to also submit this to the Cufón project?

aaron's picture

Cufón ftw!

Wow, that's exciting! Thanks for the great work, David. And don't worry if the module does end up on the "wall of shame"; I see that as a useful tool actually, as it exposes the differences in approaches as well as the similarities, and helps people make more informed choices. I've had a couple of my own modules posted there, and I know of a couple of more that should be...

peach - all drupal themes's picture

document ready

Hey mate, thx for the tutorial.

I was just reading up on Cufon and I noticed that against recommendation you load Cufon in a Document.ready wrapper. It says on their website this may cause flickr for internet explorer users because it substitures the use the the Cufon.now function..

"You should not place Cufon.replace inside $(document).ready or similar functionality because it will make Step 4 ineffective."
http://wiki.github.com/sorccu/cufon/usage

f.rodrigues's picture

thaaaanks a lot! for sure

thaaaanks a lot!

for sure will be very useful!

John Behan's picture

Thanks a million!

Sifr has frustrated me for the last time.

Your instructions are easy to follow and worked for me straight away.

Steven's picture

Thanks!

Thanks for sharing! So much easier than siFR.

Alan Hogan's picture

Text selection an issue

Cufón seems lovely and useful. I would like remind everyone that text selection can be important to visitors, and Cufón seems to disallow this (as would any image replacement without special compensation.) So if you ever want your visitors to be able to select a whole document, including Cufón-replaced headings, be aware they probably won’t be able to do so.

aaron's picture

Actually, I've confirmed that

Actually, I've confirmed that Cufón allows text selection in FF 3.0 and IE7. Their site says it doesn't work yet in Opera. But that's probably good enough for a large number of sites.

CK Ng's picture

Signwriter and Flir

You can try these alternatives as well:
Signwriter
Facelift Image Replacement Integration

Alan Hogan's picture

FLIR fails in Opera 9.5 (latest release)

Just a heads-up that FLIR’s official demo page fails in Opera, but Cufón works fine.

aaron's picture

Wow, I just googled FLIR

Wow, I just googled FLIR earlier today. Thanks for the links! Though this is beginning to look a little like something for the Duplicated Modules Hall of Shame...

CK Ng's picture

Don't think should consider

Don't think should consider them duplicate, as each employ different methods of generating the font, which I find each has its application area. Just like Sifr is not the solution for everything. ;-)

Brian Puccio's picture

Legal Issues

Very interesting, I like this approach. The one catch about this issue is that (and correct me if I'm wrong) that because the font itself is being made available (though it is converted, I'm sure it can be converted back by a visitor locally) that this might not be in compliance with the licensing terms of commercial, proprietary fonts. Aside from that issue, this looks very neat, thanks for sharing.

aaron's picture

Yes, that can be an issue in

Yes, that can be an issue in some cases. In fact, on the page where you can convert your fonts to Cufon, you have to specify that the font may be embedded for use on the web.

Still, there are usually public domain alternatives in most cases. For someone where licensing is an issue, sIFR and TextImage should continue to be viable alternatives.

dalin's picture

Some interesting things I

Some interesting things I noticed in the "Known issues":

* Firefox 1.5 and 2.0: you must use a strict doctype.
* Internet Explorer: should you not call Cufon.now() just before the closing tag, there might be a short, visible delay before the text is replaced.

aaron's picture

Thanks, I skimmed over that

Thanks, I skimmed over that part. Shouldn't be a problem in the example as I gave it, because the default garland theme uses strict doctype (not sure about zen offhand), and I'm putting the script in the header. But thanks for the heads up, good for people to be aware of if they're doing fancy theme work or scripts at the end of page load.

stephthegeek's picture

Features?

Interesting! Despite its progress, I still can't warm up to sIFR since you can't middle-click links!

I saw they have :hover effects coming as a feature... but they don't seem to link a demo of this. Does it work for links? Middle clicking links?

aaron's picture

I don't know if Cufon works

I don't know if Cufon works with middle clicked links. If someone experiments with this before I get a chance, maybe they can comment in this thread?

Thanks.

aaron's picture

Doh! I forgot that I have

Doh! I forgot that I have Cufon installed on this page... Test for yourself...

aaron's picture

Yes, middle click seems to

Yes, middle click seems to work fine... ;)

Wim Mostrey's picture

Textimage module?

Hi Aaron,

Thank you for bringing this up as a valid alternative for sIFR. I wonder how this module compares to the complete image-replacing textimage module for instance. Why do you prefer the javascript-based replacement over direct image generation?

Jeff Robbins's picture

Line breaks

Complete image replacement (of the entire text block) doesn't work particularly well for multiple line blocks particularly in dynamic width layouts where the placement of the line breaks may change based on the user's interaction with the page.

aaron's picture

As Jeff pointed out, Cufon

As Jeff pointed out, Cufon splits the images into words, so that it wraps properly on smaller screens. Additionally, in IE7, you can select the text. The project page promises future support for text selection on other browsers as soon as they figure out Opera (and they have solutions for the other browsers already in the works).

aaron's picture

I also just tested and see

I also just tested and see that select/copy/paste works as well in FireFox... Nice!

The Society for Venturism has chosen me as the recipient of its charity for this year, to hopefully offer me cryonic preservation when the time comes. And this month, Longecity, an excellent forum for the discussion of issues related to extending the lifespan of humans, has offered up a matching grant of up to a thousand dollars to help out! So help out! Please.