JavaScript: Custom fonts for your web pages

"I wish I could use a particular font on my home page." Have you ever thought about that? Have you ever wondered how that page would be if a custom font was available?
Now you can. And it is quite simple.

Typeface.js is a 24 kb library. With it you can embed custom fonts in your web page without using images or Flash movies. In the past, when someone needed to create a label with a custom font, an image would have been the solution. I used to create small images for specific labels, but - I must admit - it has always been a pain. When doing it, you have to be very careful, in order to make all labels consistent. When the site is multilingual, the time needed to create those labels, increases incredibly. The result? In my opinion, it is almost always inadequate.



Typeface is very useful, but it should be used with care. Don't even think about using custom fonts for the entire body of your page. It is perfect in creating labels, menus, headings and page titles. But that's the only real limitation: using it on big portion of text might really slow down your page.

On the other hand, typeface is free and open source, it is cross platform (support almost all browsers) and it allows basic text manipulation (like line and character spacing).
On top of that, your text will be completely visible to search engines robots. Which is a very important thing!

Is it easy to use? Incredibly. The following snippet is taken from an example on typeface web site:

  

       

    
    
  
     

    

      Text here in Helvetiker font...
    

  

On the web site, it is possible to download 3 free fonts, but there's the possibility to "convert" your font as well (provided you have the right to use the font).