I think we’re all patiently waiting for a standard way to embed any font into a web page via CSS, but adoption of the CSS3 standard for embedding fonts has not only seen slow progress, it has been met with opposition due to potential copyright issues. You can read more about the woes of standard cross-browser font embedding here.

However, you won’t have to wait until the CSS3 issues are worked out to be able to embed clean, anti-aliased, non-web fonts in your page without resorting to embedding text in images. The answer is here, and it’s called sIFR, the scalable Inman Flash Replacement.

Some people have called sIFR a hack, I just call it clever. And it’s no secret on the web – it’s been around in some form for quite a while now – but it seems that a lot of people I meet in the web design or website development business either haven’t heard of it or haven’t actually tried it.

sIFR works through a mix of CSS, javascript, and Flash. It performs surgical replacement of page text with dynamically generated flash movies, and those movies contain the replaced page text in the correct, non-standard font. Now, that may sound a bit overly complex and kludgey, but sIFR is packaged in a clean, easy, robust manner that works across browsers and allows a very fine level of control over the text replacements.

Let’s take a look at an example:

THIS IS MYRIAD PRO (which is not a standard web font)

The heading above uses a standard <h2> tag that is transparently replaced by sIFR with the flash movie containing the Myriad Pro font. One of the best things about sIFR is that if the user agent doesn’t support flash, it degrades gracefully into the default font for an h2 tag, so the user still sees the text. You may also noticed that you can highlight and copy the text as if it were a normal <h2> tag.

There is a lot of documentation on sIFR at the sIFR site (make sure to use sIFR3 for the best results), which should allow you to get things up and running quickly.

sIFR opens up a new world of web design freedom when it comes to choosing fonts. While I wouldn’t recommend replacing every bit of text on the page using sIFR, it works exceptionally well for headings and subheadings. We implemented sIFR quite a bit on the Native Eyewear website, and were very pleased with the results.

There are alternatives to sIFR such as Typeface.js, but so far sIFR seems to be the most reliable candidate for providing freedom of font choices in your website design. Your designers will be happy knowing that sIFR is in your toolbox, trust me!

Tags: design, font, sifr

This entry was posted on Sunday, March 1st, 2009 at 1:43 am and is filed under CSS, Helpful Tips, Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.