Custom Font Replacement Techniques, Sifr and Cufon

Paul — Tue, 17 Mar 2009 10:31:26 +0000

I have come across quite a lot of articles recently discussing including custom fonts in web pages. With typography playing such a key role in design, it continues to be one of the major restrictions designers face when designing for the web. When the web world wide web first began the focus was on hyperlinking and allowing access to other documents but considering how far the web has come today and all that is possible, font embedding seems like a basic idea. The biggest underlying issue seems to be managing the distribution of copyrighted fonts. Sifr offers a very useful solution to the issue for the time being, allowing font replacement through the use of Flash. It is accessible across browsers and the text can be selected on the page though some minor drawbacks have been highlighted. Some of these are:

- The inability to alter kerning of the characters.

- Flash has often been criticised for its poor anti-aliasing and this can sometimes show on the rendered text.

- Sifr can be tricky to setup and get working correctly.

- Sifr fonts cannot be scaled when you change the size of font in the browser. It only changes when the page is reloaded. Some consider this quite a serious usability problem, though because Sifr is mostly used on headers and large areas of text that probably wont require scaling, this is debatable.

- It requires the user to have Flash though nowadays almost 95% of web users have this.

A convincing alternative to Sifr which I came across recently is Cufon developed by Simo Kinnunen . The aim of Cufon was to achieve the same effect as Sifr without the need for additional software. Some specific requirements were set out when it was being developed. These were:

- No plug-ins required – The font should be able to be displayed without flash and using only the users standard browser. Cufon uses javascript to render the font.

- Compatibility – It had to work on all browsers. This has been achieved with Cufon displaying correctly on IE6, IE7, IE8, Firefox and Safari.

- Ease of use – configuration and setup for Cufon is minimal compared to Sifr.

- Cufon loads faster than Sifr with no flickering, even for larger areas of type.

Cufon works as an interface to Fontforge so it creates an SVG font based on the source font, converts it to VML(as IE only supports this), then is rendered using an engine written in javascript. The rendering engine outputs two versions of the font, one in VML shapes and one using the new HTML5 canvas tag. The font can be loaded into the file easily using the normal

NSDesign Blog » Javascript

Custom Font Replacement Techniques, Sifr and Cufon