I’ve had another problem using Cufon on a site. I have to say that I don’t think that this one is the fault of Cufon, or the WordPress plugin programmer – I think that it’s a general JavaScript issue.
The problem that I had was that I had to use two different fonts with Cufon to replace different tags on the site. What happened was that the tags were all being replaced, but they were all being replaced by one only one font, which was the last font that was loaded.
This has me worried for a while. Did this mean that I could only use one font over everything? Surely that’s not right because there’s a lot of instances of Cufon replacing multiple fonts all around the internet. It had to be something else.
It turns out that this happens because the standard plugin throws the Cufon replacement script directly into the pages head area. This works fine… most times. The problem with this is that the script executes before the page has loaded properly. This is what blocks the replacement functions working properly.
So a solution? It turned out to be pretty easy. Just wrap the Cufon replacement script in a jQuery.(document).ready() function. Then the script executes when the page has loaded, and the correct fonts are used on the correct areas.
Update 11 January 2021
You really shouldn’t be using Cufon any more. It’s out-dated and has been surpassed ages ago by web fonts. If you still want to use it, then great. If you want to see the better way of doing things, definitely check out web fonts to make your life easier.