Font replacement techniques

In the good old days the only way to display a none web safe font to a user was to save it as an image. This limited the places you could use non web safe fonts. For example, using a non web safe font was a no go for a blog article title, unless you wanted to create an individual image for every post.

Now however, it is possible to use javascript and/or flash to generate content on the fly using non web safe fonts. Here are a few popular techniques you can use.

sIFR

sIFR or Scalable Inman Flash Replacement uses flash and javascript to generate the non web safe fonts. If a user doesn’t have flash then it degrades gracefully and just shows the text in a web safe font.

There is a documentation site for sIFR and a demo of sIFR.

FLIR

FLIR is another font replacement technique that is advertised as an alternative to sIRF. Rather than generating the text with flash. FLIR actually generates the image on the fly. Out of the three image replacement techniques I am going through today, FLIR is the one I have used least so I don’t want to go into it too much, just check out the site and decide for yourself!

There is a documentation site for FLIR and a demo of FLIR.

cufón

cufón is my current favourite method of font replacement. I used to use sIFR most but now I have switched to cufón. I should mention, the downside to cufón is that you can’t highlight the text that is generated.

cufón uses a font generator to generate a javascript file which is basically used as a rendering engine to convert the text in your HTML to the the font you want to use. If you want to learn more about how cufón works there is an explanation on their site.

There is a documentation site for cufón and a demo of cufón.

There is also an excellent video guide on using cufón by Jeffrey Way.

Conclusion

Hopefully this article will give you an idea of the options available to you when using font replacement. I didn’t want to tell you what to use, I’d rather show you the options and let you decide which is best for your project.