Cufon: Fixing the damn flickering

4th of July 2010 3

Cufon: Fixing the damn flickering

Cufón is a great piece of javascript that easily let us add any font we would like to our webpages but it comes with its own set of quirks and there are plenty of good and bad ways of fixing them.

cufon fix

Ok, so how to fix it?

Well.. since Cufón has its inbuilt classes for loading, ready and so on we can simple use that together with a bit of CSS:

h1 { text-indent:-999em; }
.cufon-ready h1 { text-indent:0; }

Quite simple right? This efficiently hides the h1 in this case and shows it only when the .cufon-ready class has been added which is after the text has been replaced with Cufón. However the text still can make your content “jump” and feel a bit buggy so…

h1 { min-height: 36px; height: auto !important; height: 36px; text-indent:-999em; }
.cufon-ready h1 { text-indent:0; }

Note that you should match the height with the height that you currently have. You can check it via Firefox extension Web Developer Toolbar but you’ll almost defintely have to adjust it in order to be perfect in IE6/IE7 as well so its suggested (as always…) to have an IE6/IE7-stylesheet with conditional tags in your header.

Share it!

Was it good for you to?

Related posts

Similar posts to this one

Sponsors

Support for the site!


3 great comment(s) for this post

  1. ForceFactor 1:21 am 22/07 of 2010

    I happened to be doing a bit of work-related research in Google today and stumbled on your blog. I’ve clearly put in a little bit of time here reading through and procrastinating! You have some good observations here, so I’ll add you to my personal Google Reader for the future. Enjoy the week!

    Reply
  2. Leon 3:11 pm 27/07 of 2010

    This is bad practice, since people that have javascript disabled will not be able to read your headings.

    Better is to use Cufon.now(); at the end of the document and to keep the fonts .js files small.

    Reply
  3. Level 2 (of 10) Watch out, this user is an admin! His job is to make everything on this site work well - don't mess with him!

    Tommie Hansen (3 comments) 8:22 pm 31/07 of 2010

    @Leon:
    That would be true if we were back in 2008. However the number of users having javascript disabled nowadays is so small so it’s pretty much like doing support for IE5.

    Reply

Your opinion matters. Add it below.


Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Popular posts this month
  • 5 Random posts
  • Addtoany slow loading Cufón is a great piece of javascript that easily let us add any font we would like to our webpages ...
  • jQuery simple tabs Cufón is a great piece of javascript that easily let us add any font we would like to our webpages ...
  • Crossbrowser text shadow with jQuery Cufón is a great piece of javascript that easily let us add any font we would like to our webpages ...
  • Simple CSS buttons Cufón is a great piece of javascript that easily let us add any font we would like to our webpages ...
  • jQuery show / hide anything Cufón is a great piece of javascript that easily let us add any font we would like to our webpages ...

Follow me @design_byme RSS Design Feed

Copyright Tommie Hansen since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.