Let’s say you have your heart set on a specific font your website…

Only one problem… it is not a web-safe font like Arial, Helvetica or Lucida Sans. Well you have a couple options depending on your situation and hopefully these notes and links can send you in the right direction.

CSS Trickery

If you only plan on using your font only a couple times on your site (e.g. logo or navigation), you will want to use image replacement. There are few ways of accomplishing this, each has it’s benefits and setbacks:

  1. Fahrner Image Replacement
  2. Phark (scroll down article)
  3. Shea Method (all the way at the bottom)

The last method is by far the most rugged option of the three because it works well with screen readers and works if images are turned off. The only issues is that if your image is transparent or slow to load, your trickery will be uncovered.

Dynamic Replacement

Now if you plan on using the font multiple times on a dynamic site, things get a little trickier. The two big options in this area are:

  1. sIFR (Scalable Inman Flash Replacement)
  2. FLIR (Facelift Image Replacement)

sIFR is a Flash-based solution that replaces your text with selectable vector type. FLIR is a php/JavaScript solution that automatically replaces the font with an image if the font is missing from the client’s machine. Unlike sIFR which requires Flash, all FLIR needs is JavaScript.

Fonts play a huge role in your brand and special care should be taken to ensure their integrity stays intact. If you do end up needing to replace the font, choose a method that works for your situation. Don’t go crazy and overkill.