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.
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:
.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…
.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 oneSponsors
Support for the site!3 great comment(s) for this post
-
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 -
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 -
Tommie Hansen (3 comments) 8:22 pm 31/07 of 2010
@Leon:
Reply
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.
Your opinion matters. Add it below.
