Just a quick post. I have implemented cufon for a client’s website to replace the titles with a nice new non-web-safe font.
This code worked perfectly to replace the titles with the new font.
Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });
However, the client then asked for one of the titles (which was a link within an h3) to have a hover effect to show that it was a link. Fortunately cufon now supports :hover, so I was pleased to be able to implement this without resorting to separate JavaScript.
However, for the life of me I couldn’t get the hover effect to work!
Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon('#twitter-3 .widgettitle a', {
hover: {
color: 'aqua'
}
});
I had the right selector, the right syntax, everything. Finally, as a last resort, I scrapped the original code (top code excerpt to leave just the :hover replacement). Finally, it worked. So, I simply re-added the title replacement under the link :hover replacement, as below:
Cufon('#twitter-3 .widgettitle a', {
hover: {
color: 'aqua'
}
});
Cufon.replace('h1', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h2', { fontFamily: 'Helvetica Neue LT W1G' });
Cufon.replace('h3', { fontFamily: 'Helvetica Neue LT W1G' });
Hey presto – it worked 🙂 It seems that cufon works back up your list of rules in reverse, so the h3 general replacement was overwriting the specific h3 anchor hover lines! It took me a while to work this out, so hopefully this’ll help someone else.
Add a comment if you like – I’m sure the code above could be further optimised.
UPDATE
According to Rein (see comments below), cufon hover will only work on anchor (<a>) tags. I haven’t tested that theory myself, but worth a note here – don’t want to be the cause of lost time!
Cheers, I have just started Cufon, and this was the missing factor to why my hovers weren’t working.
All I had to do was reverse the order.
Thank you
Was just facing this same problem. Googled and found this fix. Much respect!
Thanks for that it worked for me but what I needed to do was to duplicate the styling at the bottom again to make sure it retained it on load.
GREAT!
Wow!! was pulling my hair out for quite a while before I found this. What a weirdly simple solution — finally that hover state works w/ Cufon. Many thanks.
I love you, thanks so much for posting this haha. 🙂
Thanks for posting this solution. Saved me a lot of time!
Thanx alot, this worked like a charm. Madd respect!
Maybe another good tip to share in your article above is that it only works on <a> tags! I tried it with a for an hour but finally found out it only worked on <a> tags!
Hi Rein, thanks for your comment – I’ve added a note to that effect above 🙂
Thanksssssssssssssssssssssssss
Many thanks, fixed a problem I’d been struggling with for a day and a half!
That is actually an excellent post! Saved me lots of time 🙂
Excellent fix. I scratched my head over this a couple of times, but thanks God i stumbled on this fix.
Awesome work, you have my sincerest thanks and admiration.
Thank you for the sharing and help us saving time. thx thx
Etienne
Thx a million!
Big help this, thanks so much!
Thanks for saving me
ooo, thanks much!
you just saved me many hours of insanity!
mA
If it is still not working for You, try putting the:
Cufon(‘#twitter-3 .widgettitle a’, {
hover: {
color: ‘aqua’
}
});
in random positions, I had to put it at the very beginning of the code
good luck
Big thanks, it’s working 🙂
Hi Tony,
Yes, good point, Cufon is very sensitive to where all the calls/scripts go. Here’s my checklist (order is DOM order – important!:
HEAD
– CSS file link (including the style: .cufon-loading { visibility:hidden !important } to stop FOUC
– Cufon YUI js file
– Cufon font js file
– Cufon declarations (i.e. The elements to replace fonts for – as detailed in this post)
FOOTER (just before
– Cufon.now(); function call to assist IE behaviour
Note: I use jQuery selectors with Cufon and find that it’s fine to call jQuery.js just before the body close tag (improves overall page load performance), whereas the Cufon js files seem to need to be in the HEAD as above.
SAVED MY LIFE! Thank you for posting this. You are amazing.
Try:
window.setInterval( function() {Cufon.refresh();}, 200 );
@HasanG: Refreshing Cufon by using a timer is a really bad idea for several reasons and especially when you are doing it on the whole page. Ever heard of performance?
Hi, I know this is an old blog post, but just wanted to say thanks, I was scratching my head wondering why my code wasnt working.
Of course 🙂 I realized it when I had a page about 20 cufon elements.
Thanks for the fix. Cool one
Thank you! Thank you! Thank you!
Absolute legend!!!
Really really appreciate your help, especially the updated, everything suddenly made sense. its the bloody a tag!!!
its pretty simple in fact!!
u can activate hover on any tag you want
Cufon.replace(‘.className’, {
hover: true,
hoverables: { div: true, em: true }
});
for more info: https://github.com/sorccu/cufon/wiki/Styling
Thank you SO much for posting this fix.
I just started exploring cufon today as an alternative to sIFR. The hover state problem was driving me crazy–particularly in IE. Finding your solution makes me feel better about the hour I spent at work trying to fix this. Many, many thanks!
I’m dancing over here! Thanks for this!!! I spent HOURS trying to figure this out!! (=^_^=)
WHEW! Thanks a bunch for this!
BTW, do you have a fix for those nasty ghostly white spaces?
Hi Juancho,
Which white spaces? Post me a link and I’ll have a look…
David
Thanks alot works me….
Thank you very much. It’s working.
That’s just awesome. Thank you!
Appreciate it more than you know!
You can do like this:
Cufon.replace(‘#menuContainer ul#nav li a’, {hover:true});
This works !
Great¡¡Thanks very much. You save a lot of time¡
Hi Ses,
That’ll work to make any element hoverable, but does it also make the :hover CSS colour work?
Cool if it does, seems like a neat and tidy solution.
Thanks! It works very well.
Great fix. I have twitted your post.
Thanks you so much – I was about to have a nervous breakdown.
Nick
Thank you so much 🙂
Sir,
Will you please show us demo for this because we people are confuse still…
So, we are requesting you please..
thx bro, all work
Hi Chirkut,
What are you confused about?
I can only show you a demo if you can be more specific about your confusion.
David
Thanks a lot…sir…I was stuck due to this in one of my company project….really thanks for this great help…. 🙂