Anthony McLin

Cufon

I had just given up on using custom fonts for my client's website. I was adding some new features which meant implementing a drop-down menu system when much to my chagrin, I found out that the font-replacement methods I was employing would no longer work. Of course my client would be upset because the fonts being used (ones most people don't have installed) were specific to their brand, and images were out of the question. (What's the point of a content management system if you have to resave the content as images?) I had already delivered the bad news to my team and was getting ready to notify the client...

I had been using sIFR to dynamically replace the text with images, but that wouldn't work with some of the new features. I tried Facelift FLIR instead, which did work, but the client's server was doing a horrible job rendering the custom fonts. I didn't really have any options:

sIFR - the first font replacement method I seriously used. It replaces text with blocks of Flash content. Unfortunately this leads to some unpredictable behavior when elements that need replacement don't yet exist when the page is rendered. It also was a bit kludgy to use due to differences in how Flash is included in different browsers and discrepancies between Flash css and browser css. To top it off, almost every time a new version of sIFR was deployed, I'd have to regenerate the Flash files it used to store the specific fonts.

Facelift FLIR - A nice replacement for sIFR. It relies on the server hosting the site to generate images that then replace the text. It also works directly from the .otf or .ttf font files so no need to compile the fonts in Flash. The downside to this is that if your webhost doesn't have the right versions of certain libraries, the font rendering looks atrocious if it even works at all.

CSS3 @font-face - theoretically the best way to do font replacement, this is a no-go because many browsers don't fully support it, and IE only does it with their proprietary font format.

Like I said, I was about to strip font replacement out of my client's site completely, when I discovered a new player in the field. Cufon is a very slick system that does the rendering on the browser side (no need for specific libraries on the server) and has very good browser support (going back to IE 6). While it to does have some limitations, it definitely is a better option for most of the font replacement situations I find myself in.

In fact, if it works well enough on my client's site, I'll probably implement it here to display some of the nice fonts that those Mac users don't get to see.

Categories: 

Add new comment