We live in interesting times as regards fonts in browsers. For a long time the choice has actually been getting narrower as technology has advanced. Certainly with the advent of Linux, and the popularity of all things open-source and Public License, many (if not all) of the world's most famous fonts are now increasingly being left out of Operating Systems and Browser distributions. This is because they are heavily protected and can be used only under license.

In the past Microsoft, Apple, Sun, etc. have licensed fonts for use with their Operating Systems, so no-one else had to. These days however an increasing number of systems (and by 'system' we mean a computer, phone or any other generic computing device with a display) are being created that are entirely license- (and therefore royalty) free.

This is good news for the consumer, but as a website owner it makes it very hard to specify anything. You might want your next website to be in 'Verdana', but if the person visiting your website isn't using an OS that has licensed that font, then their browser will fall back to whatever else they have. There aren't even any sophisticated systems for automatically falling back to the closest alternative. We were therefore rapidly approaching the situation where only two fonts existed: serif and sans-serif. These were literally the only two fonts guaranteed to be on every device.

It is into this situation that several new technologies have emerged that aim to solve this problem, and they are really a breath of fresh air. These solutions are invariably highly technical, not very easy to set-up, and not very reliable either (in our experience so far) but they do work. We shall investigate two of them on this page: sIFR and Cufón, as well as a much simpler alternative just using CSS.

Scalable Inman Flash Replacement (sIFR)

This text has been replaced using Scalable Innman Flash Replacement (sIFR)

This way of replacing text employs Javascript, CSS and Flash, and was the first prominent text-replacement technology to appear on the scene. It is now up to version 3 (in beta, but well worth the risk). Since it requires both Javascript to be enabled and the Flash Plugin to be installed, it will not work for every visitor. However it falls back very gracefully to just display the original text, and is also good for accessibility. Better still is that sIFR Vault offers many funky fonts for free download.

A nice feature is that the replaced text can still be highlighted with a mouse character by character (try it!) should people want to cut and paste it. However, it is not suitable for large sections of text, just for menu items and headings. One huge technical problem we have noticed is that support for transparent background excludes users of Linux. If your website design requires this, which many do, then you will be out of luck.

Cufón

This text has been replaced using Cufón

Cufón aims to be 'a worthy alternative' to sIFR, and manages to do so without any reliance on Flash. That's one fewer Plugin to worry about, and therefore a larger viewing audience for all your hard work. The solution they have dreamt up is stunningly imaginative, but this blog entry aims only to sum-up the differences to the end-user, not dwell on the technical wizardry.

For the end user the text looks the same, but cannot be selected one character at a time as with sIFR. The authors are working on this, we are told, so it sounds like they have a solution in mind. Better still Cufón is fast enough to be used on blocks of text. Most Truetype fonts can be used, but the issue of licensing is still very much a grey area. In using this technology you are revealing everything about the font to the end user. If it turns out you aren't entitled to use the font (highly likely!) then it is possible you could end up facing legal action.

However, from our point of view the biggest problem with Cufón is that it doesn't seem to work all the time. At least not on this page! This is most likely the result of some strange reaction between Cufón and Plone, but it does highlight quite nicely how precarious these new technologies can be. Our advice might be to 'wait and see'.

Good Old CSS

This text has been replaced using CSS

Ultimately, do not let technology be your master. If your requirements are simple, the text doesn't change, you don't need to highlight letters one at a time, and you want a 100% reliable cast-iron solution, just use CSS. From an Accessibility point of view there's no problem (since it is a background image), and you can have high-quality transparency with no compromises. Why seek complication?

In Conclusion

The other technologies are well-worth keeping an eye on, as is the upcoming @font-face, and CSS3. My personal recommendation would be sIFR3, but only for headings and menus, and only without transparency. In any case, it's definitely an exciting time to sit back and spectate, and wonder what might be coming next.