Libraries and Components for Software Developers @ LibHound - » How to use Custom Fonts on the website.

How to use Custom Fonts on the website.

Jul 6, 2009 User Interfaces  10 Comments

Embedding custom font into a website has always been a painful experience for web developers and designers and was often unfairly ignored on many websites. Nowadays, the latest trends in web design brought the idea back to life with new image replacement techniques.
In this article you’ll find probably most known examples of these techniques and I fairly hope that it may help you to build your website more attractive to visitors.

sIFR Image Replace Technique (wiki.novemberborn.net/sifr/)

sIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on screen with Flash equivalents. Needless to say that website visitors must have Adobe Flash Player installed to see custom fonts, else default fonts will be used. Additionally, current stable sIFR release (2.0.7) has several drawbacks itself – you can’t use CSS styling, applying custom fonts to links is hardly possible and probably most annoying – you as developer, should have a Adobe Flash editor installed to generate .swf files for each custom font.

Cufon (wiki.github.com/sorccu/cufon/)

Cufon positioned as fast and pure Javascrip replacement to sIFR. There is only single JS file to download thus it is quite easy to work with it. Before using with with Cufon, font files needs to be converted into VML path, that can be made only with Cufon’s font generator. Good news it works not only with TrueType (TTF) but also with OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts. Possible to style elements with CSS.

Typeface.js (typeface.neocracy.org)

Typeface is quite similar to Cufon for end user – a JS file to include into webpage, online generator to generate fonts. It is extremely easy to use on a webpage, just type there a CSS directive “font-family: YourFont” and you get it embed. Sounds good? Time to mention the drawbacks. First of all, only TTF fonts can be used with Typeface.js. Second, I noticed that sometimes it just cuts characters in the end and the phrase become incomplete, reason unknown till now. Despite that it is pretty good product and worth trying.

FontJazz (www.FontJazz.com)

FontJazz is a tiny typographic engine written in JavaScript, enabling web designers and developers to use any typeface on a website! Solution a bit similar to Cufon and Typeface.js but much less technically creative. With FontJazz you just need to generate font file on their website (single .gif file and js-map array) then Javascript library will use it as a sprite image (solution is similar to CSS sprites).

Facelift Image Replacement, also called FLIR (facelift.mawhorter.net)

FLIR is an image replacement script that dynamically generates image representations of the text label and automatically inserts it with Javascript into the web page. Any element with text can be replaced: from headers (>h1<, >h2<, etc.) to >span< elements and everything in between. Unlike others, FLIR utilize quite old method to achieve the goal – FLIR has PHP-based server-side part that can be a big disadvantage not only for ASP.NET, Java, Ruby, Python developers but also for the HTML slicers/coders, who usually working with this kind of software.

Updated: For most of these scripts I’ve noticed 2 common problems:
1. All of them except sIFR and FLIR are not working with Unicode or Cyrillic or Extended Latin characters.
2. Creating HTML links is a problem with all of them except FLIR as well, where in sIFR links become completely unclickable and in others in some browsers you’ll notice a non-linked gaps between each character in the word.