Here's a simple workaround to use typeface for links on your website:

You simply duplicate your content into a span with another class. Typeface will render both spans on page load. The css styles will show each one depending on the hover state. Not the most efficient but looks great!

If you encounter any issues with IE not giving you consistent hover. Add:

Thanks - I couldn't get this to work without that hack. I'd could of course get the examples to work, but when I trivialized them and then switched from Arial to my own font... no soap. So I conclude that there's some funny business with Arial, which perhaps is the default font or something. Anyway, this hack worked... I needed the IE frig too, and that leaves as per the post below somewhere:

>Also, in IE the link hit areas are not a square box, but only the actual solid parts 
>of the letter. (Meaning that you can't click the middle of an "O") I'm sure this 
>can be fixed by drawing an invisible box in VML. 

Maybe IE users can live with that. Otherwise brilliant; less hassle than sIFR.

I noticed a bug that when you load typeface and for some reason the JS font is missing, it will break on hover (at least in IE it will). Possibly this is the cause of your problems. Here's a patch for that:

=============================startpoint at line 343=====================
var elementsLength = elements.length;
  for (var i = 0; i < elements.length; i++) {
  if (elements[i].className.match(/(^|\s)typeface-js(\s|$)/) || elements[i].tagName.match(/^(A|H1|H2|H3|H4|H5|H6)$/)) {
    //----------------this function is in case of <a> tag conversion----------------//
    if(elements[i].tagName.match(/^(A)$/))
    {
     
    var mysheet=document.styleSheets[0]
     
    var st = elements[i].innerHTML 
    elements[i].innerHTML = '<span class="hover">'+st+'</span><span class="unhover">'+st+'</span>'
     
    }
    //-----------------end function------------------------//
    this.replaceText(elements[i]);
   
    if (typeof callback == 'function') {
    callback(elements[i]);
    }
  }
  }

=======================a tag added at line 766==========================
var typefaceSelectors = ['.typeface-js', 'A', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

=======================Startpoin at line 868============================
if (document.addEventListener) {
//------------------------this line is added in order to pass css parameters to hover state----------//
for (kkk=0; kkk<document.styleSheets[0].cssRules.length; kkk++){
 
if (document.styleSheets[0].cssRules[kkk].selectorText=="a")
{
 
 
  document.styleSheets[0].insertRule("a .unhover{display: block; }", styleSheet.cssRules.length);
  document.styleSheets[0].insertRule("a:hover .hover { display: block; }", styleSheet.cssRules.length);
  document.styleSheets[0].insertRule("a:hover .unhover{ display: none; }", styleSheet.cssRules.length);
 
 
}
else if (document.styleSheets[0].cssRules[kkk].selectorText=="a:hover")
{
  var css = document.styleSheets[0].cssRules[kkk]
  var cssString = ""
  for(sss=0;sss<document.styleSheets[0].cssRules[kkk].style.length;sss++)
  {
  if(document.styleSheets[0].cssRules[kkk].style[sss] == "font-family")
  {
    cssString+= "font-family:"+document.styleSheets[0].cssRules[kkk].style["fontFamily"]+";"
  }
  else{
  cssString+= document.styleSheets[0].cssRules[kkk].style[sss]+":"+document.styleSheets[0].cssRules[kkk].style[document.styleSheets[0].cssRules[kkk].style[sss]]+";"
  }
  //alert(document.styleSheets[0].cssRules[kkk].style[sss]+":"+document.styleSheets[0].cssRules[kkk].style[document.styleSheets[0].cssRules[kkk].style[sss]]+";");
  }
  //alert(cssString)
  document.styleSheets[0].insertRule("a .hover {"+cssString+" display: none; }", styleSheet.cssRules.length);
}
}
//-----------------End function--------------------------//
window.addEventListener('DOMContentLoaded', function() { _typeface_js.initialize() }, false);
}