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.


sIFR

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!


FLIR

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.


cufón

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.

  • Pingback: Google Font API()

  • http://www.lovesongdatabase.com 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.

  • http://www.jumpinmycar.co.uk 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