It’s a little jquery patch I wrote after I found this post. I think this works better…. and in all browsers… Just copy it somewhere after the DOM is ready. (jquery.ready())

What the problem is; :hover is a css pseudo selector, but a event state in Javascript. (Or some thing like that…) So it only gives the right color on mouse over. Only than the selector is valid.

The fix is simple; rebuild the element on mouse over, so you find the right color. The rebuild has only to be done the first time you role over it. And after reading the Typeface-js source, I found the render method hack to fix the un-rendered text element in the new color. Done is my mesh up. Have fun with it. 

$(".typeface-js a,a.typeface-js").hover(
	function(){
		if(!$(this).hasClass('typeface-js-hover-checked')){
			$(this).wrapInner('<span class="typeface-js-normal"></span>').append($('<span class="typeface-js-hover"></span>').text($(this).text()).css('color',$(this).css('color'))).addClass('typeface-js-hover-checked');
			_typeface_js.renderDocument();
		}
		$(this).find('.typeface-js-normal').hide();
		$(this).find('.typeface-js-hover').show();
	},
	function(){
		$(this).find('.typeface-js-normal').show();
		$(this).find('.typeface-js-hover').hide();
	}
);