By Cesar O.
Fonts are one of the biggest troubles for web designers to date. For ages we have been either using images or scripts to work around this issue. If you want to use a fancy font, you have only a couple of alternatives: you could use @font-face, you could just use images (the most common way to do it), or you could use a rendering engine like SIFR or cufon. This blog will explain roughly what these 2 alternatives are, some pros and cons and just an overview of how they work. If you want to learn in depth what they can do at its fullest I recommend going to http://wiki.novemberborn.net/sifr/ for SIFR3 and http://cufon.shoqolate.com/generate/ for cufon.
SIFR
This technique uses the DOM and flash to render non-traditional fonts. SIFR is sort of easy to implement, although some people would not agree with this. It requires a flash file and a couple of scripts provided.
Pros and Cons
The pros are that it doesn’t violate any copyright, since the font is embedded in the swf and the text can be selected so you can add effects to the fonts. The cons are that it takes some time to load and requires flash to be enabled
How To Use
You have to open the flash file and replace the font in the file for the one you want to use and then publish the file.
Basically, to make this work, you have to include the swf file with the font you need, plus, in the sifr.js script you have to add the selectors you want to change, and specify the style for them.
This is the rendered code
This is the result
CUFON
Cufon is pretty much an improved version of typeface.js and easier to implement too. Cufon works with the browser to render VML for IE and Canvas, for other more modern browsers.
Pros and Cons
The pros are faster load times and it basically works better than typeface.js. Cons are that it violates EULA copyrights due to the font being embedded.
This is the rendered code
This is the Result
How To Use
To use it you have to include the scripts provided in the cufon website. Also, you will need to enter the fonts in the website to generate the script you are going to use for a specific font. After this, in the document use jquery to specify the selectors that you are going to transform.
Final Thought
On my personal opinion I like cufon better, since it is easier to implement and it only requires js, not flash, this means that it can display on pretty much any browser. Also, it loads faster and works with big blocks of text without affecting performance. It is easier to style also. I recommend using this for small sites only, so you can be safe to use it (EULA copyrights wise).