Extras & Tools

back to all tools and extras

sIFR and Cufon

In this article you will learn more about sIFR and Cufon, two techniques that used to be used to display custom fonts on a web page. These were not covered in the book because many web developers have moved on to use the CSS @font-face technique that was covered. You may, however, find it helpful if you come across an older site that uses these techniques.

The Background

In the book we discussed how web designers were traditionally limited to using a small set of fonts that they could expect users to have on their computers.

We also looked at the @font-face rule in CSS, which allow you to specify a font that should be downloaded onto the computers used by visitors to your site so that they can display fonts that might not be installed.

Two alternative methods for showing fonts that visitors might not have installed on their machines (which were popular before the @font-face technique became widely used), were not discussed in depth in the book: sIFR and Cufon.

sIFR

sIFR used a combination of JavaScript and Flash to replace parts of the text on a page with a Flash movie that represents the text. This technique was devised for use with small amounts of text, such as headlines; it was not recommended for entire pages of writing.

It is worth noting that the author of sIFR no longer supports the technique and suggests that users either use CSS @font-face rules or a commercial service. It is mainly covered here as additional information for those who may come across sites that use the technique.

This was the first widely adopted method of including different fonts on web pages, without resorting to using images. It proved particularly popular with sites that used content management systems, where the authors of articles were not likely to be creating images for each heading.

In order for sIFR to work, there were three pre-requisites:

When writing the page, the author had to:

Because the web page author was not giving away the font in a format that people could easily use in the programs they run on their computer every day, the people who make fonts rarely complained about its use in this manner.

You can find a sIFR tutorial here.

Cufon

Rather than using Flash, Cufon used a mix of SVG and VML to render the fonts, and as with sIFR it relied on JavaScript to indicate what should be shown. It was faster than sIFR. The visitor to your site did, however, need a browser that supported SVG or VML.

If a web page author wanted to include a font in their page they:

There were two main disadvantages with this technique:

You can find a Cufon tutorial here. You would also have needed to generate the Cufon version of your font using the Cufon Generator which is no longer active.

Recommended Alternatives

Rather than using either of these techniques, many developers would recommend that you use either the CSS @font-face rule described in the book, Google Fonts, which is a service that hosts a range of open source fonts and provides the code described in the @font-face section of the book for you, or a commercial service such as Adobe Fonts.