Stairwellblog

Typography on the web has always left something to be desired. With so few options it can be frustrating to many web designers. However, recently there have been many developments on the web typography frontier and now with a little extra work there are ways to get any typeface you want to display on your web pages.

1.

sIFR is perhaps the best known dynamic text replacement technique. It was first conceived by Shaun Inman as a way to dynamically replace HTML text with flash text.  It’s a great solution from a user standpoint because the text not only looks great, but it can also be copy and pasted. It also allows for hover properties, unlike most techniques. From a developer’s standpoint it can be a little tricky. It works by a delicate balance of a js script, a special swf file, and some hijacking of your heading tags via css. It adds a few http requests in there and has a lot of rendering to do so the sIFR team recommends not to replace all your text on the page with sIFR, but only a few elements.

2.

Facelift is much like sIFR except that instead of replacing the text with flash, it uses images. This immediately has one major drawback – it can’t be highlighted or copy and pasted like normal text.  However, I’ve found development with FLIR is much more pleasant. After including the initial javascript it works right out of the box and doesn’t seem to have that delicate balance like sIFR does with its css styling. The only major drawback on the development side I could see is that it uses php to create the images, so if you’re unable to use php on your server or don’t have the ability to run server side scripts on whatever environment you’re on than you won’t be able to use FLIR.

3.

Typeface.js uses the browser’s vector drawing capabilities to render the text any way you’d like. It uses canvas or VML depending on which browser it’s being displayed on. I must say that it’s pretty creative and has some pretty good potential. However, right now highlighting the text for copy and paste is still very odd and doesn’t work across all browsers. It seems to work in firefox 3 but gives you no feedback that you’ve highlighted the text, you just has to have faith.  For development it’s not too bad. One major drawback is that you have to convert your font on the Typeface.js website. You upload your font it converts it to a js file with vector coordinates for each character. All you need to do with your converted font is attach it to your head and use font-family and font-weight to apply it via CSS.

4. @font-face in CSS3

This is the mother of all cross browser typeface implementations, because its actually part of the css3 spec. It’s not a hack or a workaround. It embeds the font into your webpage’s and gives the user beautiful type with none of the sacrifices from the other techniques listed here. The only real drawback at this point is that its not 100% cross browser compatible. FF3, Safari 3, and IE8 all have @font-face working properly, but there still lies the older versions of all those browsers. Surprisingly IE7 and below are actually fixable. Ever since IE4 you’ve been able to embed fonts in IE with their proprietary OET format. The only way to get an OET font is to use Microsofts WEFT software that hasn’t been updated since 2003. Its not a joy and is certainly a pain for development. However, with VMware and Windows XP I was able to download WEFT, convert some .ttf fonts to .oet, and embed them in my page with CSS. The key to the @font-face property is to use conditional comments to send the .eot font to IE and the .otf fonts to everyone else. For a great article on cross browser implementation of @font-face check out http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work

There you have it, 4 techniques for displaying html text in any font you wish. Each have their pros and cons. sIFR can be a pain to develop in, FLIR uses server side scripts and users can’t highlight the text, Typeface.js has the same highlightable text problems that FLIR has, and @font-face will still leave FF2, Opera, and Safari 2 users in the dark. My suggestion is to know all 4 and be prepared to use the best one that fits your project.

Last 5 posts by steve

• Frontend Optimization, pt. 5 - June 12th, 2010
• Frontend Optimization, pt. 4 - June 11th, 2010
• Frontend Optimization, pt.3 - May 27th, 2010
• Frontend Optimization, pt.2 - May 20th, 2010
• Frontend Optimization, pt.1 - May 10th, 2010