On my page (I take this moment to make some publicity , http://andrecardoso.eu, I formerly tried to use Facelift to  include some hand-written fonts. Problem is that the technique uses image replacement, which is not a good thing. Web-designers can say much more about this than I can…

So I tried to find alternatives:

• http://typekit.com/
• http://typeface.neocracy.org/

Neither one left me very happy.

My (very limited) understanding about these techniques makes me think that it is all about using transferring a font from some place using javascript and using it locally to render the wanted text. Of course that different techniques are used to render them. Facelift did this in a different way because it leaves the font remotely, and uses an ajax request to a php script that would create an image with the rendered text on the server. The image would then be pulled from the server and appended to the document.

I did not like the alternatives because, in part, it’s just too damn similar (conceptually) to what the browsers can now do using CSS3 specification.

So…I decided to use CSS3, which is, in fact, very easy and a great improvement. To use a font we just have to declare a name and its location:

/**
 * declare the fonts to use
 */
@font-face{
 font-family: "GregsOtherHand";
 src: url('fonts/gregsotherhand.otf') format("opentype");
}
@font-face{
 font-family: "HandSean";
 src: url('fonts/handsean.otf') format("opentype");
}
@font-face{
 font-family: "NoteThis";
 src: url('fonts/notethis.otf') format("opentype");
}
@font-face{
 font-family: "PykesPeakZero";
 src: url('fonts/pykespeakzero.otf') format("opentype");
}
....
....
/**
 * use the fonts with the names created
 */
p{
 font-family: "PykesPeakZero", Helvetica, sans-serif;
 font-size: 18px;
 color: #000000;
}
li{
 font-family: "GregsOtherHand", Helvetica, sans-serif;
 font-size: 24px;
}

The problem is that we’re still very far from a correct implementation of this specification in all browsers and operating systems. You can see in the pictures the difference between the rendering in Linux (Gentoo) and Windows (Windows XP), both using Firefox:

To improve a little the rendering in windows, I went to http://www.fontsquirrel.com/fontface/generator and used the available options to improve the quality of the fonts, besides converting to OpenType format to suite Internet Explorer. The differences are very small, yet visible.

For me, this is the most annoying: same browser, different rendering?! Is there a way to solve this?? (please, tell me

But the problems don’t end here.

Between different browsers the implementation of this CSS3 thing is still in different stages. So we can expect different results. My Internet Explorer can’t even seem to be able to use @font-face at all, even with the Open Type format. Don’t know why…

Conclusion: this is a mess…hope the implementations evolve fast…

Consulted Material

• http://typekit.com/
• http://www.css3.info/preview/web-fonts-with-font-face/
• http://www.position-absolute.com/articles/html5-font-face-is-not-as-ready-as-you-would-think/
• http://randsco.com/index.php/2009/07/04/p680
• http://www.fontsquirrel.com/fontface/generator
• http://www.alistapart.com/articles/cssatten
• http://www.useragentman.com/blog/2009/09/20/font-face-in-depth/
• http://www.smashingmagazine.com/2007/11/08/40-excellent-freefonts-for-professional-design/
• http://www.fontsquirrel.com/fonts/junkos-typewriter
• http://typeface.neocracy.org/