Disable / Remove / Edit Cufon Styling

[samgray1999]

I'm currently working on the default product page in Business Catalyst and need to disable or edit the Cufon styling for the H1 tag. When the product page is rendered it adds the Cufon style to the header tag, but I have not figured out where to modify this block of code or where to disable it.

Any help would be greatly appreciated.

Thanks.

Sam

[Mihai Stoichitescu]

Search in your files anything regarding cufon and remove it if you don't want to use it.

The library will most likely be loaded in one of you templates in the head or before the closing body tag.

Check Usage · sorccu/cufon Wiki · GitHub for info of things you should remove.

If you need further help, share the link to your page.

[samgray1999]

I thought about searching the files as you suggested, but couldn't find a way of doing that without opening each file and using CTRL-F or downloading every file and using my IDE to search all files simultaneously. Is there a way of searching all the files for "cufon" simultaneously from within BC?

[Mihai Stoichitescu]

Try downloading all files and do a search on your IDE.

But the scripts should be only in templates, or depending on how the template was created in ContentHolders/Includes as I'm guessing the cufon was loaded to appear in the entire site.

[samgray1999]

Mihai Stoichitescu wrote:

Try downloading all files and do a search on your IDE.

But the scripts should be only in templates, or depending on how the template was created in ContentHolders/Includes as I'm guessing the cufon was loaded to appear in the entire site.

Thanks, Mihai. I will do that and post the outcome of my efforts.

[Liam Dilley]

As a side note on this... Try not use cufon font, get rid of it and use modern font methods like google fonts or @font-face. Your font uses flash based tech and is one of the slower methods out there and will not work on mobiles.

[samgray1999]

That's exactly what I'm trying to do- get rid of it. It's funny that it is built into the default template without any way of turning it off.

[Mihai Stoichitescu]

Hi Sam,

Can you please let us know what template you used for your site?

Thanks.

[samgray1999 · Accepted solution]

Ok. So for those of you have found your way here hoping to find the solution, you're in luck! I was able to successfully remove cufon from my business catalyst site. Firstly, to do this, you do NOT need to download your entire website via FTP and use an IDE to search for instances of cufon, because I did it for you

There are two files where cufon get's it's evil power:

1. /js/jquery.main.js
2. /styles/all.css

In Business Catalyst, go to the "Develop" tab and then locate and open the "jquery.main.js" file "js" folder. Comment each of the following cufon instances as follows. By adding // to the beginning of a line, you are changing it to a comment, so it won't be rendered at runtime. You can also encapsulate multiple lines with <!-- and --> to comment multiple lines.

Examples:

     // initCufon();

     or

    /* initCufon(); */

Assuming you have not altered the original "jquery.main.js" file in the past, here's where to look:

• Line 6 add // before initCufon();
• Encapsulate lines 18, 19, and 20 with /* and */ - this is where initCufon function is defined
• Line 45 add // before initCufon();
• Line 69 add // before initCufon();
• At the very bottom of the script add // to beginning of lines 438 and 440

Once you commented the above lines, Cufon is effectively disabled, however the styling still exists. To change the styling, open the "all.css" in the "styles" folder.

1. Place the cursor anywhere in the css script and the press "CTRL+F" on your keyboard; a search line will appear at the top of script.
2. Type "cufon" (without quotes) and press enter. Each time you press enter, it will jump to the next instance found.
3. When I changed my styling, I ecapsulated each instance of cufon I found in <!-- and --> to remove disable it. Essentially, you could just delete them, but I like to keep original code, just in case I need to troubleshoot later.

For Example:

.cufon-active .header-panel ul li a { line-height:24px; }

became

<!--.cufon-active--> .header-panel ul li a { line-height: 24px; }

or

.header ul li a { line-height:24px; }

I hope this helps anyone with the same problem. I should add that after I disabled Cufon in the "jquery.main.js", I had to fix the styling of my main navigation menu.