Extras & Tools
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.
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.
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:
- The user must the Flash player is installed in order for it to work, and therefore it would not work on devices such as the Apple iPad or iPhone.
- The creator of the site must have a copy of the Flash authoring environment if they want fine grained control over the font settings, or if they do not need a fine level of control over the font, there is a tool to create the .swf files without the need for Flash available here http://www.sifrgenerator.com/.
When writing the page, the author has to:
- Add a
- Add some CSS rules to hide the elements that are going to be replaced if Flash is installed
- Provide a Flash .swf file with their chosen font
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.
If a web page author wants to include a font in their page they:
- Add a
There are two main disadvantages with this technique:
- Users cannot select the text (for example to copy and paste it)
- You can't set a different hover state for any of the content
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.