Friday 6 November 2009

Simulated Client: Font embedding

For my simulated client's website, I would like to use a font replacement technique as the choice of fonts supported by browsers is limited. Often simple image replacement is used, positioning the text off-screen and replacing it with an image. Although in most cases this is ok, there are many possible problems linked to this technique. To get around such problems there is a technique called non-standard font embedding and I am looking into the different methods to see which is best for this situation.

"The thing with non-standard font embedding techniques is that they mostly rely on JavaScript and sometimes Flash or PHP to render text in whatever custom font is specified. Thus, choosing the right solution for a web project can become tricky[...]


The good thing about these techniques is that they all take into account things like accessibility, SEO readiness, and browser support. These are all huge factors in web development today. For Internet Explorer users, IE6 is supported at least, and for non-supported browsers, thankfully every one of them degrades gracefully into your standard HTML rendered text.

In conclusion, every one of these techniques has its own set of advantages and disadvantages. sIFR is the oldest and most “proven method”, however it relies on both Flash and JavaScript thus taking a hit on performance. FLIR uses the old school technique of replacing text with images and even offers text effects. However, it is hardest to set up and requires a web server with PHP and the GD library enabled.


Typeface and Cufon are the most promising beign the easiest to setup. On the other hand they are both plagued with licensing issues and lack of ability to select text, which for many can be a deal breaker. This appears to be changing though, as Type Select builds on top of typface.js and promises text selection functionality. Still, it is a relatively new player and is also plagued by limitations such as lack of support in IE and no support for :hover and line breaks." View article for list of pro's and cons.

0 comments: