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 can 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 allows 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. One of the big restrictions with this @font-face technique is that a lot of typeface creators do not allow their fonts to be used in this manner.

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 uses 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 is 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 service such as Typekit or Fontdeck. 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 are three pre-requisites:

When writing the page, the author has 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.

If you would like to try using sIFR you can find a sIFR tutorial here.

Cufon

Rather than using Flash, Cufon uses a mix of SVG and VML to render the fonts, and as with sIFR it relies on JavaScript to indicate what should be shown. It is faster than sIFR, and at the time of writing the developers of it were still actively updating it. The visitor to your site does, however, need JavaScript enabled in their browser in order to see the font.

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

There are two main disadvantages with this technique:

If you would like to try using Cufon you can find a Cufon tutorial here. You will also need to generate the Cufon version of your font using the Cufon Generator.

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's Web 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 service such as Typekit or Fontdeck.