This is more predominant in Internet Explorer, where there is a flicker on page load before cúfon kicks in, especially on graphic heavy sites. We can prevent this by hiding the text until the page has loaded and all the scripts run.
Firstly we need to identify javascript users, which we can do by adding the following script at the top of the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<script type="text/javascript">document.documentElement.className = 'js';</script>
</head>
This allows us to target browsers with js enabled/disabled in the css, e.g. hiding/showing elements accordingly. This is not valid html (<html> cannot have attribute 'class') but it works well, and due to the need to execute this js before the <body> element has been initialised, we cannot put the class on the body.
In the css we can target users with javscript enabled to hide the cúfon aletered text with:
#content h1
{
color: #000;
font-size: 1.8em;
}
.js #content h1
{
position: relative;
z-index: -10;
}
This hides the text before the javascript runs.
In our javascript file add the following line after the cúfon code:
$(document).ready(function() {
// Font replacement
Cufon.replace("#content h1");
Cufon.now();
$("#content h1").css("z-index","1");
});