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.
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:
- 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).
- JavaScript had to be enabled in the user's browser, since a JavaScript is used to indicate which parts of the text should be replaced by the Flash movies.
- 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:
- Use JavaScript to indicate which elements should be replaced with Flash
- Add a
<script>element to tell the browser where it can find the JavaScript that does the work of checking whether the browser supports Flash and, if it does, replace the specified content with Flash - 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.
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:
- Converted the font they wanted to have on their pages using an online tool called the Cufon Generator. When they uploaded their chosen font, the generator created an SVG and VML version of the font, and then turned this into a JavaScript file that the user can download.
- Used JavaScript to indicate which elements should be replaced with your Cufon typeface, such as headings or elements with a particular class.
- Added a
<script>element to include a JavaScript that renders the type in the page
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
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.