Using Cufon

posted by Ishmael Sanchez on Jul 30, 2010

Dealing with web typography can be a disaster. Finding a font that fits the site, setting the font-family CSS property (and "fallback option/s"), then testing the rendering in different browsers. And even after all that you are still hoping the first font is even installed on the user's operating system and if not you just have to deal with the rendering of a generic web-safe font. A second option would be to use images, but that makes things harder to maintain and change. A third option is text replacement. There are several way to implement this Cufón, Google Font API, sIFR, P+C DTR, SIIR, and many more. I have used Cufón succesfully and wanted to share my general process and how to use it with Drupal.

First, why use Cufón?

  • Browser Support
  • Easy to use
  • Doesn't require Flash
  • Rendered using only JavaScript (Degrades gracefully if JavaScript isn't enabled)

Ok, sold. How do you use it?

Cufon Files
Files needed to use Cufón

Drupal and Cufón

Using Cufón in your Drupal theme

  1. Add the Cufón script and the generated font file to your theme
  2. Create another script file and call Cufon.replace
  3. Include the scripts in your info file (Make sure the path is correct and lead with the main Cufon file)
  4. Clear your cache
Add Cufon to your Drupal theme
My info file, note the path all my scripts are in a js folder.

There is a Cufón module, but if I can accomplish something at the theme level without installing a module I will. Having said that I have never used this module so it might be worth checking out if you can't set up Cufón or are having difficulties.


Post new comment

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

More information about formatting options

By submitting this form, you accept the Mollom privacy policy.

Ishmael Sanchez