Extras & Tools
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.
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.
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:
- The user had to install the Flash player (which is no longer supported, and even then would not work on devices such as the Apple iPad or iPhone).
- If the site creator wanted fine grained control over the font settings, they needed a copy of the Flash authoring environment. If not, they could have used an online tool.
When writing the page, the author had to:
- Add a
- Add some CSS rules to hide the elements that were 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.
You can find a sIFR tutorial here.
If a web page author wanted to include a font in their page they:
- Added a
There were two main disadvantages with this technique:
- Users could not select the text (for example to copy and paste it)
- You couldn'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 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.