Modulor. Custom Software Solutions.
Facebook | Twitter | LinkedIn
Posted by: Gustavo on June 28, 2011
Category: Javascript
Typeface.js is a javascript that allows you to embed custom fonts in web pages. When using it you will identify some up / downsides compared to other libraries such as Cufon.

One of the upsides is that is allows you to do searches and select & copy rendered text.

On the other hand, it is not still prepared to handle rollovers/hovers in CSS.

Don't worry, there is a workaround to this. We found it on the forums of Typeface website (

It involves generating a couple of spans that will be rendered with typeface and then using CSS we will be able to add hover capabilities to hide / show each of the spans, allowing us to "emulate" a hover / rollover.

h1 a .white { display: none; }
h1 a .blue{ display: block; }
h1 a:hover .white { display: block; }
h1 a:hover .blue{ display: none; }

<h1>< a href="#">
<span class="white">this is a link</span>
<span class="blue">this is a link</span>

The post also mentions problems that might be encountered on IE which can be solved adding the following:

h1 a { height: 15px; cursor: pointer; }

It might not be very efficient, but accomplishes the objective while a solution is developed.