Using sIFR on foamex.com (rendering VAG rounded)

A while ago we came across sIFR, a method to render any font on a website using Javascript and Flash. sIFR works pretty much this way: you download the package, copy the Javascript into to the appropriate folders within your web project, use the included .fla file to create the master font for the web (obviously you need to have the font installed on your computer) and copy the exported .swf file into your web folder. sIFR takes text from your standard HTML markup (e.g. inside a <h1> tag) and substitutes each character with a Flash character. This is done after the page is loaded (the JS is placed before </body>). If Flash is not available on the target device sIFR nicely degrades to HTML. It’s a solid method but somewhat tricky to install and has a couple of other disadvantages. We always found that the rendering was not as good as using images but we never upgraded to sIFR 3 which seems to be better in this regard. In terms of cross-browser compatibility sIFR did a good job but character spacing is a little bit off between IE and FF/ Safari which makes it difficult if you want to control line breaks.

Using cufon on a transparent div

Recently I stumbled upon a new method called cufón and I decided to use it for a new project. The installation of the demo was really easy and results looked totally the same on all browsers. The method sounds more complex in terms of what technically happens but neither the developer nor the end user notices any of this. Cufón consists of two modules: a font creator converts a font into VML paths (I am using this awesome site) which are then put into the web directory of your choice together with one more JS file. Just like sIFR you are using regular HTML markup and apply a special CSS class to the parts you want to be picked up by cufón for font substitution. Just like sIFR, cufón will also degrade to HTML if scripts are disabled on the target device.

The results are amazing: it’s super fast, excellent rendering and works on all browsers and platforms. The only disadvantage is that text is not selectable as every single word is put in one <canvas> tag. In IE 6 where <canvas> is not available a different method is used which allows to select text but only one word at a time. We are currently developing 2 new projects using cufón and we will post results here as soon as we go live.

Update: There is quite a bit of write-up on the net comparing different font rendering methods:

• http://www.erenemre.com/2009/03/cufon-vs-sifrwhich-one-is-better/
• http://chriskjennings.com/2009/02/introducing-cufon-sifr-alternative/
• http://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-typeface-js