Using Cufon
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?
- Find a font (TrueType or OpenType) and download it
- Convert the font to be compatible with Cufón
- Download the Cufón script
- Replace text using
Cufon.replace(Not a good idea to do this for body text)
Files needed to use Cufón
Drupal and Cufón
Using Cufón in your Drupal theme
- Add the Cufón script and the generated font file to your theme
- Create another script file and call
Cufon.replace - Include the scripts in your info file (Make sure the path is correct and lead with the main Cufon file)
- Clear your cache
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.