Using any font on a website

How many times, during a website development, you have asked yourself how can I use this font on my website? You probably had this kind of choice:

1. Use 10-15 standard fonts that are accessible worldwide
2. Slice out all headers and buttons in Photoshop and put them on your website as an image.

We can choose limited creativity or additional work during the website modifications.

These choices are definitely unsatisfying in the 21th Century. We are still waiting for the CSS3 @font-face to be implemented in mainstream browsers. Currently, only Safari has implemented @font-face and is able to show any TrueType (.ttf) or OpenType (.otf) font on its pages.

For now we have a few (better or worse) choices:

1. Scalable Inman Flash Replacement (sIFR)
2. Facelift Image Replacement (FLIR)
3. Typeface.js open source JavaScript library
4. Cufn JavaScript font replacement

We have to compare above techniques to choose the best one.

SIFR (Scalable Inman Flash Replacement)

Scalable Inman flash replacement example

SIFR (Scalable Inman Flash Replacement) is an open source, JavaScript and Flash implementation of web fonts. Like other mentioned techniques it allows the replacement of HTML/XHTML text elements with Flash objects.

Here are some sIFR details:
Size: 29 KB (compressed)
Supported browsers: All browsers supporting JavaScript and Adobe Flash technology
Supported font file types: TTF
Font styling: font-size, color, font-style, font-weight, line-height, text-shadow
Selectable text: Yes

Comparing sIFR to the other solutions mentioned in this article, it has one big advantage the ability to select the text. SIFR also helps us not to violate fonts EULA the font is contained in SWF file.

Unfortunately, sIFR is quite slow and shouldn't be used for regular text only for headlines. It also requires that visitors have JavaScript and the Adobe Flash plug-in enabled in their browsers.

FLIR (Facelift Image Replacement)

Facelift image replacement example

FLIR (Facelift Image Replacement) is an image replacement script that uses both PHP and JavaScript for its purpose. FLIR JavaScript searches for the HTML DOM elements that need to be updated, sends the relevant data to PHP script, and replaces the text elements with the resulted image.

Here are some FLIR details:
Size: 33 KB (uncompressed)
Supported browsers: All browsers supporting JavaScript
Supported font file types: TTF
Font styling: font-size, color, font-style, font-weight, line-height (using cLine equivalent)
Selectable text: No

FLIR's main advantage is that the font used in text replacement is served as an image so it doesn't break the font EULA. It also prints correctly (fonts are displayed as images). Unfortunately, FLIR text is not selectable - and it needs PHP with GD enabled on the server side.

Typeface.js and Cufon JavaScript libraries

Cufon font replacement example

Typeface.js and Cufn JavaScript libraries. I will treat this libraries as one because there are only slight differences in a way they work. Both JavaScript libraries use fonts converted to internal format and displayed using canvas or VML.

Here are some Typeface.js details:
Size: 17 KB (uncompressed)
Supported browsers: Firefox 1.5+, Safari 2+, and Internet Explorer 6, 7 not 8
Supported font file types: TTF
Font styling: font-size, font-style, font-weight, font-stretch, letter-spacing, line-height
Selectable text: No (not yet)

And Cufon details:
Size: 15 KB (compressed)
Supported browsers: Firefox 1.5+, Safari 3+, Opera 9.5+, Google Chrome and Internet Explorer6+
Supported font file types: TTF, OTF, PFB, POSTSCRIPT
Font styling: font-size, font-style, font-weight, line-height, text-shadow, color
Selectable text: No (not yet)

As we can see, there are some differences between Typeface.js and Cufn. Cufn is working on many browsers, makes it possible to convert more font formats, and support a font color property.

Both JavaScript libraries are faster compared to sIFR due to the lack of Adobe Flash technology.
They also doesn't need PHP on the server side. There are however some cons replaced text can't be selected and font embedding usually violates a font's EULA.

Which solution is for you?

So which solution you should choose? There's no simple answer. You should choose the one that best suits your needs.