Cufon Javascript Error - "Attribute only valid on v:image"


After having used Flash based text for the web for a couple of years, I stumbled upon a great script which makes implementing raster, rich typography on the web painless and very customizable. The script Cufón is one of my new favourites, and seems to be a healthy alternative to Flash text that works well in every modern day browser - even Internet Explorer 6 (IE6).

We're currently working on a site who's audience will mostly consist of IE6 users. Midway throughout our build process I noticed the javascript error "Attribute only valid on v:image" occurring only in IE6. After much googling, I found no replies to others whom have had this problem...

In our case, the error had been due to the PNG fix that was implemented for IE6 only. We have been using Unit PNG Fix, as well as Cufón on the same page - and the inclusion of both had caused some errors.

The Fix

Option 1:Change the order in which Cufón and Unit PNG Fix scripts are included. Call Cufón BEFORE Unit PNG fix.

<script src="/js/cufon-yui.js" type="text/javascript"></script>
<script src="/js/yourFontHere.font.js" type="text/javascript"></script>
<script src="/js/unitpngfix.js" type="text/javascript"></script>
<!-- Wrap the PNG fix in IE specific conditional statement -->

Option 2: It seems the problem can also be fixed in our case by using a different PNG fix, such as Supersleight (although I prefer Unit's fix).

I hope that helps someone out!

5 responses to “Cufon Javascript Error - "Attribute only valid on v:image"”
  1. Damian Caynes Says:

    Thankyou! I noticed cufon was bugging on a site I was working on, found no solutions and spent all day working out other font replacement techniques, none of which were as good as cufon.

    Then I did one last google and found your post, and unitpngfix had been included in the template.

    If only I'd found your post at the start of the day, but still, good outcome :)

  2. Raj Says:

    Thank you so much for this post! Just ran into the exact same problem on a website that I am currently developing. Calling the PNG fix last seems to fix the issue.
  3. taelor Says:

    Thanks a lot! Solved my issue :)
  4. James Westwood Says:

    Just the fix I was looking for - thanks for posting this =)
  5. Marissa Says:

    I also got this error but my solution was different - I had the ShareThis widget running at the same time as Cufon.

    Cufon.replace('ul#primary-links li a, .st_sharethis_custom', {fontFamily:'HelveticaNeue', hover:true});

    Fix: remove hover:true from the ShareThis cufon call.

Leave a Reply

  • Twitter
  • Facebook
  • LinkedIn