Niepoprawne wyświetlanie skryptu JavaScript

Witam wszystkich

Od razu na wstępie poproszę o wyrozumiałość. Jestem kompletnym laikiem jeżeli chodzi o język javascript. Modyfikuję gotowy template strony. Na samym wstępie pojawił się problem z polskimi znakami. Na formatce były wykorzystywane fonty z skryptem Cufona. Po wygenerowaniu nowego fontu z polskimi znakami i podmianie plików wszystko działa ok....ale:( Na jednej z podstron przestała poprawnie działać animacja wyboru menu. Żeby przedstawić to obrazowo standardowo tło od przycisku jest czarne+biały tekst, natomiast po najechaniu kursorem myszki tło zmienia się na białe a tekst na czarny. Na głównej stronie animacja działa prawidłowo jednak po wejściu na podstronę po najechaniu kursorem na przycisk podświetlenie zmienia się na białe jednak tekst nie zmienia się na czarny (pojawia się jedynie biały prostokąt). Próbowałem nawet kombinować z stylami CSS i widać że po najechaniu myszka na przycisk tekst zmienia na moment kolor, jednak finalnie wszystko zostaje zakryte białym podświetleniem. Kod tego co prawdopodobnie zarządza tą animacją znajduje się poniżej:

 tabs = {
  init : function(){
   $('.tabs').each(function(){

    var th=$(this),
     tContent=$('.tab-content',th),
     navA=$('.nav a',th)

    tContent.not(tContent.eq(0)).hide()

    navA.click(function(){
     	var th=$(this),
      	tmp=th.attr('href')
     	tContent.not($(tmp.slice(tmp.indexOf('#'))).fadeIn(1000)).hide()
	 	$(th).parent().addClass('selected').siblings().removeClass('selected').find('span').stop().animate({opacity:'0'},600);
	 	Cufon.refresh();
    	return false;
    });
   });

  }
 } 

Część na stronie która zajmuje się sterowaniem menu:

<div class="col1">
	<h2>Kategorie</h2>
        <ul class="nav">
	<li class="selected"><a href="#Fashion"><span></span><strong>Fashion</strong></a></li>
	<li><a href="#Objects"><span></span><strong>3D Objects</strong></a></li>
													<li><ahref="#Wedding"><span></span><strong>Wedding</strong></a></li>
													<li><ahref="#Reportage"><span></span><strong>Reportage</strong></a></li>
													<li><ahref="#Advertising"><span></span><strong>Advertising</strong></a></li>
													<li><ahref="#Portrait"><span></span><strong>Portrait</strong></a></li>
	</ul>
	</div>

CSS do styli

.tabs .nav {padding-top:5px}
.tabs .nav li {line-height:28px;padding-bottom:2px}
.tabs .nav li a {position:relative;font-size:16px;letter-spacing:-1px;text-transform:uppercase;text-decoration:none;height:28px;line-height:26px;padding:0 39px 0 9px;color:#fff;background:#000;display:inline-block}
.tabs .nav li a span {display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#fff}
.tabs .nav li a strong {font-weight:400}
.tabs .nav li a:hover, .tabs .nav .selected a {color:#000}
.tab-content figure {padding-bottom:15px}
.tab-content figure.marg_right1 {margin-right:20px}

Dziękuję za wszelką pomoc. Może ktoś życzliwy pomoże;)

Pozdrawiam

Wyrzuć cufona, jest 2016, a nie 2010. Ten skrypt sprawia wiele problemów, jeżeli chodzi o interakcje, częściowo rozwiązuje to opcja hover: true, ale generalnie nie ma sensu w dzisiejszych czasach trzymać Cufona.

Panowie, wiem że Cufon to przeżytek natomiast nie chcę bardzo wchodzić w modyfikacje formatki ponieważ nie mam czasu na tworzenie strony od nowa. Formatka mi się podoba i jest na miarę moich oczekiwań;) Jedynie na czym się naciąłem to brak polskich liter co (tu nie znam przyczyny) wpływa na cześć animacji strony. W chwili obecnej wygląda to tak:

Fonty z polskimi znakami znajdziesz na 1001freefonts.com wystarczy podmienić

Hej Panowie

Dziękuję za pomoc. Udało mi się rozwiązać problem dzięki pomocy kolegi powyżej. Pobrałem czcionkę o tej samej nazwie co w bazowym projekcie w formacie OTF następnie konwertowałem na js. z polskimi znakami, teraz wszystko działa ok. Nie wiem czemu jest to niekompatybilne z innym formatem czcionki. Grunt że działa:)

Pozdrawiam