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 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 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 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.


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.

  • Pingback: Google Font API()

  • Love Songs

    Hmm.. I never knew there was javascript that let you use fonts that aren’t generally web safe. I know you could with Flash, but the way I know of certainly isn’t any easier than using images. Do these ways still display the font as actually selectable FONT, or do they basically just convert it into an imagine or something along those lines? I’ve always hated being limited in design because of web safe fonts.

  • The Hoff

    Web fonts – or @font-face css – I think is going to be the new standard when it comes to almost any custom (selectable) fully web friendly (no web standard) fonts. Worth checking out the font squirrel generator