Grow your CSS skills. Land your dream job.

Cufon Smooth Hover Transition (jQuery script)

  • # February 15, 2013 at 12:03 am

    Hey guys, I usually use Cufon in my sites to get those thin smooth custom fonts (as against Google webfont api which has fonts which are a bit thicker). One problem I have is that adding a hover color transition on a Cufonized link doesn’t look nice. Colors just swap instantaneously and you can’t apply a smooth transition on them.

    So I made a jQuery plugin that applies a smooth hover color transition on Cufon elements. I’m sharing it to everyone.

    Demo: http://bfintal.github.com/Cufon-Smooth-Hover/

    Github: https://github.com/bfintal/Cufon-Smooth-Hover

    # February 15, 2013 at 12:16 am

    That’s because (1)the design of the typeface has thick strokes. (2)text faces are a bit thicker and have different curves to better render at smaller sizes. (3)Majority of Google’s webfonts are poorly optimized for the screen.

    Check out Webtype or Typekit. Cufon isn’t that widely used anymore. Nice work, though!

    # February 15, 2013 at 12:35 am

    Thanks! I hope people still using Cufon might benefit from this.

    I’m all for Webtype and Typekit, although since I author WP themes, (I assume) some of my buyers might be turned off with the additional cost from using them. Unfortunately for my case my only options are Google and Cufon.

    # February 15, 2013 at 12:40 am

    Completely understand.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".