Cufon: Fixing the damn flickering

Normal view Thumbnail view Lists view Magazine view

4th of July 2010 18

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:

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.

Filed under § CSS, XHTML — Tagged with "ie6" cufon, all in one cufon slow loading, atrial fibrillation, avoid refresh css slow, boilerplate cufon flickering, brassicaceae im natur lexikon, breathing sounds, byme.se, CSS, cuffon and ie, cuffon flicker, cufon, cufon :not, cufon addtoany, cufon avoid flicker, cufon background flickering, cufon before load, cufon button, cufon buttons, cufon code slow, cufon css shadow, cufon cursor flicker, cufon delay, cufon delay flcker, cufon delay ie, cufon delay internet explorer, cufon delayed on slide, cufon do not show fonts until loaded, cufon faded initial load slow, cufon fix flicker, cufon flacker verhindern, cufon flackern beim laden, cufon flcker ipad, cufon flcker issue, cufon flicer, cufon flick on load, cufon flick problem, cufon flicker, cufon flicker bug, cufon flicker fix, cufon flicker fix for firefox, cufon flicker fix ie, cufon flicker hack, cufon flicker ie, cufon flicker ie7, cufon flicker ie8, cufon flicker in ie, cufon flicker in safari, cufon flicker issue, cufon flicker of fonts, cufon flicker on background, cufon flicker preloader, cufon flicker problem, cufon flicker problems, cufon flicker safari, cufon flicker when load, cufon flicker with boilerplate, cufon flickering, cufon flickering 2011, cufon flickering drupal, cufon flickering fix, cufon flickering in ie, cufon flickering issue, cufon flickering on load, cufon flickerry, cufon flickers, cufon flickers before, cufon flickert, cufon flikker, cufon font flicker, cufon font flickering issue ?, cufon font load slow, cufon font loads slow, cufon font prevent flicker, cufon fonts slowing internet explorer, cufon height, cufon hide, cufon hide initial text, cufon hide original text, cufon hide text, cufon hide text before load, cufon hide text jump, cufon hide text until cufon change, cufon hover flicker, cufon i36, cufon ie delay, cufon ie delay table, cufon ie fix, cufon ie flashing, cufon ie flicker, cufon ie jump, cufon ie lags, cufon ie slow, cufon ie slow load, cufon ie6, cufon ie6 e ie7, cufon ie6 ie7, cufon ie6/ie7, cufon ie7, cufon ie7 slow, cufon ie8 flicker, cufon ie8 table, cufon ie8 very slow, cufon ie9, cufon internet explorer it comes slows, cufon internet explorer slow, cufon is loading slow on ie7, cufon it is late in loading, cufon jquery, cufon js slow, cufon jump, cufon jump slow in ie, cufon jumping, cufon jumping text, cufon jumps, cufon jumps ie, cufon lagging in ie, cufon late loading, cufon load delay, cufon load fast, cufon load faster, cufon load hide, cufon load ie faster, cufon load issue, cufon load slow, cufon loading delay, cufon loading delay fix, cufon loading fix, cufon loading flickering, cufon loading font slow, cufon loading late, cufon loading progress, cufon loading slow, cufon loading slowly in ie, cufon loading text slow, cufon loads slow in ie, cufon loads slowly, cufon long loading on firefox, cufon makes ie slow, cufon menu jumping, cufon menu text shadow, cufon module flicker, cufon not load flicker, cufon now flickering, cufon on buttons, cufon page flicker, cufon painfully slow in ie, cufon performance issues loading delay, cufon prevent flicker, cufon prevnt flicker, cufon problem flicker, cufon reduce flicker, cufon refresh flicker, cufon refresh slow in ie, cufon refresh slow on ie, cufon render flicker, cufon render is slow, cufon rendering explorer slow, cufon replace loading slow?, cufon replace slow, cufon replacement flicker, cufon rollover problem, cufon rollovers slow in ie, cufon runs slow, cufon safari flicker, cufon safari flickering, cufon shadow, cufon shadow in ie7, cufon show hide ie6, cufon slow, cufon slow ie, cufon slow ie7, cufon slow ie9, cufon slow in ie, cufon slow in ie7, cufon slow load, cufon slow loading, cufon slow loading solved, cufon slow on ie, cufon slow rendering ie, cufon slow to load, cufon slowing in ie, cufon slowly, cufon slowly loading, cufon slows internet explorer, cufon stop flicker, cufon stop text jump, cufon takes long to load, cufon takes while to load, cufon text jump, cufon text jump on load, cufon text jumping, cufon text jumps, cufon text jumps firefox, cufon text jumps ie, cufon text jumps when clicked, cufon text shadow, cufon text shadow ie7, cufon text-indent, cufon trademark flickers, cufon why slower in ie, cufon with shadow, cufon-loading, cufon-loading and cufon-ready, cufon-ready cufon-loading, cufont flicker, cufontext, cufontext tag, cufonts slow loading, cufon{text-indent:0!important;}, custom cursor flicker in ie9, cyclospora cayetanensis, dictionarysearch, eagle barrett, epidemic typhus, fade when cufon load slow, fast loading cufon, faster cufon load, firefox 10 cufon load slow, fix cufon flicker, fix cufon flicker on load, flicker cufon-canvas, flicker scrollover cufon, flicker with cufon, flickering cufon, flickering in the cufon, flickering webpages loading wrong, font flicker cufon, font flickering cufon, font-face ie9 flicker delay, genpril, hide cufon, hide cufon before loading, hide cufon loading, hide cufon until load, hide text while cufon loads, hover delay in ie when using cufon, how can avoid flickering when using cufon, how to avoid flickering in cufon, how to load cufon faster, how to solve cufon load slowly, how to use cufon loading, html menu flickering, http://byme.se/css/cufon-fixing-flickering.html, ie cufon jumping, ie cufon slow fix, ie6 ie7 cufon fonts fix, ie7 cufon, ie7 cufon slow, ie7 flickering table, ie7 javascript rollover flickering, ie9 flicker with page load, ie9 flikker previous page, internet explorer font-face flicker, is cufon bad practice, is it possible to load cufon fast, javascript cufon text jumps, jquery cufon shadow, jquery cufon text shadow, laggy cufon ie8, load cufon faster, load cufon faster footer, load cufon font faster, load cufon fonts faster, loading cufon quicker, make cufon font load faster, make cufon load faster, make text not jump cufon, mrsa infection, mumsnet, normal, not flickering cufon, page flickers with cufon, pb with cufon uploading slow, pottiaceae, prevent "flickering" of text replaced by cufon, prevent cufon loading delay, profen ii, reason for cufon flickering issue, rendering flicker cufon, screen flackering cufon, scripts, shadow with cufon, simple, site:http://byme.se "" 2.., skin clammy, slow cufon, slow loading cufon, slow loading font cufon, spinal_cord, stop cufon flicker, sulfamide forte opht, sulfinpyrazone, tags, telemedicine, text flicker on cufon, text jumping in cufon, text replacement, text shadow cufon, text shadow with cufon, theme, uni multihist dm, very slow cufon in ie, vidarabine opht, vufon flicker, web, web font flicker, webpage with cufon slow in ie, why does cufon flicker, wp cufon still getting flicker, wp-cufon flicker, xeloda, xhtml, yodefan liquid, youtube flickering jquery

Share it!

Was it good for you to?

Similar posts to this one

18 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 (16 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
Efren Lugo 11:48 am 10/11 of 2010

Tommie is right,

As many users have javascript enable by default. Is nothing to worry.

I think only servers had javascript disabled for security reasons.
Reply
soyo 3:45 pm 22/02 of 2010

The idea is good – the implementation is wrong. Solution enclosed.

Leon: “this is bad practice, since people that have javascript disabled will not be able to read your headings”

Well, potential seo issues moreso – though search engine bots do process js a bit, a search engine could very possibly consider the text referenced in this manner as not visible, therefore not indexable – so potentially not helpful. Also some web appliances do not use JS still either, they would be s.o.l.

New, the right way:

Create a separate stylesheet with all of the .cufon-ready statements you need.

Then throw this into the head section of your page:

<script type="text/javascript">
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "/path-to-your-new-stylesheet.css";
document.getElementsByTagName("head")[0].appendChild(ss);
</script>

Obviously, this uses javascript to build the reference to your new stylesheet… so, if javascript is off, no cufon-ready applied – all text still visible. If it’s on – cufon flicker is gone.

Have a great day!

Soyo
Reply
Tommie Hansen (16 comments) 4:07 pm 22/02 of 2010

@soyo: Nice solution, however using append and manipulating the DOM in such fashion surely will have an impact on performance. It’s a nice other way to do it though. :)

But wouldn’t it be easier just to use the noscript tag straight of?
Reply
soyo 5:02 pm 22/02 of 2010

Given all the code sites are running today, the impact is very minimal IMO. But like everything in this field, there’s always a tradeoff! I came down to that code because its as cross browser compliant as I could find and puts my mind at ease, while still solving the cufon problem.

The problem with noscript is that there is no safe cross browser way of applying it – technically in newest forms of xhtml, it does doesn’t function as expected when you try to bend the rules. I tried different variations of noscript when I started tackling this problem, and every attempt was a cross browser failure with the exception of applying it as an ‘inline style’ fix at the point each element was displayed – not a great solution. :-(. It’s really not designed to be used for global style references, primarily due to the head vs. body issue which adds to the problems.

I would be curious for you to try this solution on your end and let me know what you think, I’m always looking for the best way to get things done *the right way*…. or at least, as right as possible ;-)
Reply
soyo 5:19 pm 22/02 of 2010

I should also add: I don’t apply cufon fix to every site. Depending on what features are incorporated, and what cufon font styles are being used, I have found that if I can match the default font type closely to the cufon font cross browser, and/or the site shows a minimal flicker effect due to fewer resources applied, I typically leave that alone. But for more progressive sites that reference youtube videos in slideshows, etc., (aka more noticeable cufon flicker on build) and especially those set on using unique cufon fonts, this is the path I’ve been following, (albeit with some browser detection thrown in for good measure)…
Reply
Tommie Hansen (16 comments) 5:51 pm 22/02 of 2010

@soyo: Your solution do work, haven’t got much time nowadays to check stuff out though.

Doing it the *right* way is always good, however i feel that Cufón is a bit of a dying breed even though CSS3 has serious rendering issues in my opinion. Or… i haven’t seen anything better that look similar in all browsers… yet.
Reply
soyo 6:37 pm 22/02 of 2010

Well maybe a fellow blogger will stumble in, try it out and offer their opinion – who knows we’ll see!

As for Cufon, I agree 100%. It’s the best imperfect solution of the moment, ready to be unseated… though like many cross-browser technologies with a position of prominence, it will likely be a slow and heavily debated death… ;-)

Cheers
Reply
Tommie Hansen (16 comments) 6:42 pm 22/02 of 2010

Yeah.. i’ve been in that debate and still, as i said, @font-face just doesn’t do it to a 100% and often result in jaggy fonts. It’s like a solution that will eventually be fine but just isn’t at the moment. :f

Cheers
Reply
soyo 4:39 pm 1/03 of 2010

By the way, I went back through my notes and there is another option that I wasn’t able to use when I was looking for my own solution, but it might be a more appropriate option here!

I didn’t even think about it because all of our sites are designed around custom web applications, not semi-static web pages.

simply add this to your css:

.cufon-loading {
visibility: hidden;
}

This hides the entire display, then spits it out completely built. In IE, it means a second or two of nothing, then wham, there’s your page.

Of course, it eliminates the DOM issue, as well as the missing text with JS off issue.

I can’t use this effectively, because our custom web apps load in segments – so we need to have certain elements appear as the page loads. (If we did use this, the pause in IE becomes way too long).

But it could be an effective alternative in the more mainstream environment of semi-static web pages, and it’s a lot easier to implement than the solution I ended up with for my own needs.

Can’t speak for cross browser on this one, as I abandoned it before I got to that point.

Cheers
Reply
soyo 4:40 pm 1/03 of 2010

Huh, my last post didn’t come out right – I must have mistyped something… maybe you can fix it?
Reply
Tommie Hansen (16 comments) 4:51 pm 1/03 of 2010

@soyo: Yes, that’s an old method though.

The problem with it is that if you got something that loads and isn’t needed for the page to work (say a slow call to Google Analytics, Adsense or some bookmarking stuff) it will serious delay the rendering of the page.

I still find this to be somewhat of a non-issue due to the fact that javascript is just SO.. available. According to W3C 95% of visitors had javascript enabled in the year 2008. That’s 3 years ago. The discussion is nice though. :)

Btw: You forgot to close your CODE-tag. Fixed it.
Reply
soyo 6:54 pm 1/03 of 2010

Yep, and as I described that’s why we were never able to use it for our purposes… ;-(

But for someone stumbling into this blog, I thought it would be worth mentioning, it can be a good fit for the right sites and it’s not quite as involved as our previous discussion.

To be honest with you, I actually like the effect better so long as the pause is short – because with all of the methods we’ve discussed to this point, there is still content… and then more content. Even if not an actual font change, it is still a distraction. There is a certain cleanliness to having it all appear at once.

(On the other hand, the same effect can be created with the first methods we discussed if you wanted, though I’m not sure to what resouce expense).

As for javascript, for me it’s always about SEO, and making sure the search engines pull what I need. Even though there are some devices that default to JS off, they are going wayside as we type. Whatever methods are used, if seo is a consideration then just make sure the SE’s are able to see what you want them to see and all will be well…

Cheers…
Reply
ismail 10:19 pm 12/12 of 2010

life saver :)
Reply
Caithlin 7:08 pm 19/01 of 2010

I’ve been looking everywhere to find a solution to this problem, thanks so much!
Reply
Tommie Hansen (16 comments) 1:38 am 31/01 of 2010

@Caithlin: Glad i could help. :)
Reply

Cufon: Fixing the damn flickering