Font Changes - Cufon js

Get Started
1

I have a client that has purchase a template that is using the cufon script for fonts. They do not like how the font looks when scaled on the headers. I am either looking to do one of two things, completly remove cufon from the site, or figure out how i can overide it on the Heading tags (H1,H2,etc…).

I have tried to remove the script from the header and body, but I loose the navigation drop down menu under the “Services” tab for some reason.

header:

    <script src="js/cufon-yui.js"></script>
    <script src="js/cufon-replace.js"></script>
    <script src="js/MgOpen_Moderna_400.font.js"></script>
    <script src="js/MgOpen_Moderna_700.font.js"></script>

body:

<script type="text/javascript">Cufon.now();</script>

Any help in the right direction would be helpful -

http://031863e.netsolhost.com/adept/index.html

Thanks
Ryan.

2

:tup:

Cufon is a dead technology, having been replaced by @font-face, which is much better. I recommend you get the free MgOpen Moderna font and run it through the FontSquirrel @font-face generator—which will provide the formats needed and the CSS to go with it.

As for the dropdown, a similar problem occurred in another thread the other day, but it was because the general JS script on the site had a reference to Cufon, and was throwing error after the Cufon script that it referenced was removed. That’s super easy to fix, so don’t let this be a barrier. :slight_smile:

3

Thanks Ralph - I agree on removing cufon is the best option. Can you point me in the direction of fixing script.js file so that cufon doesn’t ruin the drop down menu?

if($.browser.mozilla||$.browser.opera){document.removeEventListener("DOMContentLoaded",$.ready,false);document.addEventListener("DOMContentLoaded",function(){$.ready()},false)}$.event.remove(window,"load",$.ready);$.event.add( window,"load",function(){$.ready()});$.extend({includeStates:{},include:function(url,callback,dependency){if(typeof callback!='function'&&!dependency){dependency=callback;callback=null}url=url.replace('\
','');$.includeStates=false;var script=document.createElement('script');script.type='text/javascript';script.onload=function(){$.includeStates=true;if(callback)callback.call(script)};script.onreadystatechange=function(){if(this.readyState!="complete"&&this.readyState!="loaded")return;$.includeStates=true;if(callback)callback.call(script)};script.src=url;if(dependency){if(dependency.constructor!=Array)dependency=[dependency];setTimeout(function(){var valid=true;$.each(dependency,function(k,v){if(!v()){valid=false;return false}});if(valid)document.getElementsByTagName('head')[0].appendChild(script);else setTimeout(arguments.callee,10)},10)}else document.getElementsByTagName('head')[0].appendChild(script);return function(){return $.includeStates}},readyOld:$.ready,ready:function(){if($.isReady) return;imReady=true;$.each($.includeStates,function(url,state){if(!state)return imReady=false});if(imReady){$.readyOld.apply($,arguments)}else{setTimeout(arguments.callee,10)}}});
$.include('js/superfish.js')
$.include('js/FF-cash.js')
$.include('js/uCarausel.js')
$.include('js/jquery.cycle.all.min.js')
$.include('js/jquery.equalheights.js')
$(function(){
   $(".box-2").hover(function(){$(this).addClass("alt");Cufon.refresh();},function(){$(this).removeClass("alt");Cufon.refresh();});
	if($('#message_form').length)$.include('js/forms.js');
	$('.carousel-2').uCarausel({show:5,buttonClass:'car-button'})
	$('#slideshow').cycle({fx:'fade', height:'auto',timeout:0,next:'#next_slide',prev:'#prev_slide' });
})
4

Hm, I don’t know much JS, so try removing the bits in red, but I can’t guarantee the code will still work. If this doesn’t work, perhaps repost in the JS forum:

$(".box-2").hover(function(){$(this).addClass("alt");[COLOR="#FF0000"]Cufon.refresh();[/COLOR]},function(){$(this).removeClass("alt");[COLOR="#FF0000"]Cufon.refresh();[/COLOR]});