Elegant Theme Font Switch – Cufonfont Problem

So I use elegant theme theme’s for some of my websites. They make a solid, easy to use product.

However, one problem I noticed is that some (or all?) of their themes (like Simplepress and Lightbright) seem to use this Cufon font/text stuff. Cufon font is a text replacement script that switches out whatever CSS/HTML font family you might be using with another font on the fly during page load. Sounds great, right? Ability to load custom unique fonts??– Sweet! Not so fast. Cufon fonts have one very noticeable design flaw and is at this time a dated technique that should no longer be used. The main problem with cufon is that you can actively SEE the font switch occur during load. As in, you load the page and all the font is in Arial (for example), and then after a moment, the font switches to the Cufon replacement font. Fix after the break.

Why Cufon Sucks

So you’ll see the page load once, and then load a second time with the new font– which causes things to move all about with the new font size parameters. To make matters worse, this will happen every time you reload a page or go to a new page– its not a one off or just first load kind of thing. So you’ll have plenty of time to start to notice that it wasnt your imagination the first time as you go from page to page. Basically, it looks tacky, very tacky. The switch is usually pretty quick, at about .2-.5 seconds. however, sometimes the font replacement can take several seconds which REALLY looks lousy. Im not sure why elegant themes hasnt diabled Cufon in their older themes or at least added an option to turn off Cufon for ALL of their themes– but they should.

The Better Option: Google Web Fonts

Google web fonts is clearly the future for web based fonts– it quickly loads once and is done, has 200+ fonts to use, is free and is very easy to implement. I suggest “WP Google Fonts” plug-in to implement Gfonts on a WP site. Read more about Plug-ins I recommend here.

Turning off Cufon in E.T. themes:

You can turn off Cufon in theme settings– but only for some of the themes. If there is no “disable cufon” type option within the e-panel then you have to find the “script.php” file in the include folder within the theme directory. That file should have a cufon call command that looks something like this:

Cufon.replace(‘h5’)(‘h6′,{textShadow:’1px 1px 0px #fff’})(‘h6′,{textShadow:’1px 1px 0px #fff’})(‘#quote div span’,{textShadow:’1px 1px 0px #fff’})(‘#blurbs div span.titles’)(‘h5’)(‘.hover span’,{textShadow:’1px 1px 0px #fff’})(‘.fn’,{textShadow:’1px 1px 0px #fff’});


Once you find this cufon call command– just comment it out. That should disable cufon fonts in whatever theme you are using.

If this fix doesnt work, leave me a comment and ill try to find a fix for whatever E.T. theme you are using.

12 comments

  1. Hey Mike,

    I am using the Elegant Theme “Chameleon” at this URL http://www.bar-1.com. We found an unusual behavior with the Cufon font replacement where the Nav Menu is replacing the letter “N” with a small caps “N”. It does not happen anywhere else throughout the site other than the navigation menu.

    Please review the navigation menu and let me know if you have any suggestions on how to fix this.

    Warm Regards,
    Ryan

    1. Hey Ryan,

      My problem wasn’t that I wasn’t using IE8 (though I wasn’t) but rather the URL doesnt go anywhere (did you type it correctly?).

      Also, have you considered switching to Google Web Fonts? Is there any specific reason that you wish to stick with Cufon? Also, there is a cool plug in mentioned here: Plug-In’s Worth Having, called Browser Specific CSS. This plug-in will give you a list of browser specific classes. The classes only affect their respective browsers, as such its a great way to fix IE-related issues.

      Mike

  2. Hello Ryan,
    Could you help me? For some reason the fonts on my blog (http://homeandbahay.com/) is not the same as the one on Elegant Theme that I am using,
    Delicate News (http://www.elegantthemes.com/preview/DelicateNews/).
    It looks like instead of Arial-Verdana-Sans-Serif….it skips the Arial. I would really like to fix this but I’m getting cross-eyed already studying what’s wrong with the css. The stylesheet seems to be the same.
    I would appreciate your help.
    ~Chelo

    1. Hey Chelo,

      I just viewed in Chrome, I see the text in the nav as Arial. Is this a browser specific issue? The text at the bottom appears to be century gothic, then arial.

      Not seeing where its displaying verdana where it shouldnt be though.

      Thanks,

      Mike

        1. Well, the first site must be having a problem with cufon then, because it doesnt look like its calling the cufon text replacement.

          This article is about removing cufon, so this is a slightly different problem. Generally, Id recommend finding a google web font to use rather than cufon (for the reasons I talked about).

          However, if you wish to get cufon working, I would probably reupload the files as it appears they are damaged or something isnt working properly. Maybe you deleted something (code or a file) or maybe the files for the cufon didnt all transfer to your host properly when you uploaded?

          Id backup and reinstall the files — or try manually reuploading and fixing files… or better still, disable cufon and use google web fonts.

          Mike

Leave a Reply

Your email address will not be published. Required fields are marked *