Cufon Tutorial – Hover, Foreign Characters, jQuery, Punctuation

Here’s a quick, no-fuss guide to working with Cufon.  Examples included

Hover effect on links

Set “hover:true” in your Cufon.replace statement.

Example:

Cufon.replace('a.linkStyle', { 
    hover: true, 
    fontFamily: 'National Book' 
});

Foreign character support

Select required glyph support checkboxes before generating cufon files.

Example:

For French character support, I found that ticking the Latin-1 Supplement did the trick

 

Note: You might have to do a quick online search to figure out which set of glyphs you need for your respective language.

jQuery event triggered style change:

This usually involves a different class being applied at the jQuery event. Define the separate styles for each class as usual. Then wherever you handle the Event and class change, add in Cufon.refresh() right after it.

Example:

/*CSS*/
#tabItem { color: #333333; }
.tab_Selected { color: #ffffff !important; }

/*jQuery*/
$("#tabItem").click(function () {
 $("#tabItem").addClass('tab_Selected');
 Cufon.refresh();
}

Punctuation

Certain punctuation such as apostrophes may not directly render in cufon. Select the WordPress punctuation checkbox before generating cufon files.

Troubleshooting Cufon Issues:

• Style change in jQuery not working:

  • This can be caused by conflicts in the cufon.js files. For instance, if there are multiple links of the same file that get applied in a single page, then the style-change may not work properly.
  • When working with something like SharePoint, make sure to isolate your cufon.js links to a central location, preferably the Master page. So as to prevent links from Page Layouts and Master Pages from overlapping and conflicting.

• Cufon not rendered/only partially rendered in certain browsers:

  • This is likely to be an IE issue. And if you check your Script tab in the developer toolbar you are likely to see an error that’s somewhere along the lines of this:

SCRIPT5007: Unable to get value of the property ‘firstChild’: object is null or undefined

• This is usually caused by conflicts in cufon.Replace() statements, especially when you’re trying to overwrite a previous style.  If the same exact selector is referred to by multiple cufon statements, this will cause an error and stop cufon in it’s tracks, so that any cufon calls following the conflicting statements will not get applied. 
• Always remember to give some sort of specific selector when you have to apply different styles to the same class, depending on where the class is used. This can be achieved easily by addressing each instance of the class using a unique wrapper as a selector.

DONT – Instead of overwriting styles like this:

Cufon.replace('a.site_Link , { fontFamily: 'National Light' });
Cufon.replace('.wrapper_Right a.site_Link , { fontFamily: 'National Book' });

DO – Go for specific unique selectors each time:

Cufon.replace('.wrapper_Left a.site_Link , { fontFamily: 'National Light' });
Cufon.replace('.wrapper_Right a.site_Link , { fontFamily: 'National Book' });

Advertisement