Drupal – Convert Text into Image Using Cufón

The font display is a big problem in Web development because not all the fonts are cross-platform compatible. A work around is to convert the styled text into an image using Javascript. In Drupal, there is a module called Cufón.

1. Download and unzip the Cufón module in <drupal_root>/sites/all/modules

2. Enable the Cufón module and download the cufon-yui.js to <drupal_root>/sites/all/modules/cufon/js

3. Generate the <font>.js file @ Cufón

4. Upload the generated <font>.js to your theme folder.

5. The Cufón module determines the HTML Class and convert it to image. You can now configure the classes in Adminster -> Site configuration -gt; Cufón Settings

 

6. See what you get

 

Done =)

Update @ 2011-08-25: Please note that some fonts are unable to render characters like Chinese. In that case, no text will be shown in the browser. I have spent more than an hour today to check the missing text issue today… what da fuck…

Reference: Drupal Module – Cufón

5 thoughts on “Drupal – Convert Text into Image Using Cufón”

  1. “not all the fonts are cross-platform compatible”

    What does that mean exactly? All modern browsers (even IE6!) support CSS @font-face for applying fonts directly to text, and any font licensed for use on the web can be easily converted to the various formats with tools like http://www.fontsquirrel.com/fontface/generator

    In what way are fonts not cross-platform compatible?

    Like

    1. Hi Scott,

      Ya, i did use the @font-face Generator to embedded the font family in javascript. but somehow i realize that even i did that, the same font may display differently in windows and in mac.

      one example is the OregonLDOLightRegular. it shows great in mac but dizzy in windows.

      Have u met this problem before?

      Kit

      Like

    1. I am not sure on that but as cufon changed the text into an image, those internet bots should be unable to index it.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.