Typography is a very important element to design, and it’s quite a shame that for the past decade we’ve resorted to using images to display this element, without having the flexibility to define different fonts outside of the 13 or so web safe fonts. In the past few years, however, we’ve seen a growing trend towards forcing new typefaces on the web. CSS defines a property for browsers to support a property called @font-face which lets the developer define new typefaces and include the original font file for the browser to download and render the site with. Support for this feature has been implemented in Safari already and is due to release with the next versions of Firefox and Opera. Though this is definitely good news and progress in the right direction, a few issues stand in the way:
- Copyright is an issue for downloading and sharing fonts via the font-face attribute
- Internet Explorer 6-8 do not support font-face
- Font-face could potentially pose a threat if malicious sites attach/spread viruses via the font files
Until font-face is fully adopted, web developers must resort to complimentary or supplementary solutions to make non-traditional typefaces work. There are few major flash and javascript solutions in existence that offer solutions with different approaches to displaying these typefaces. The three major typeface scripts that I am going to discuss are SIFR, FLIR, and Cufón. Before diving into details about each I’d like to point out that all of these solutions that I discuss are 100% SEO friendly, and all require JavaScript (and flash in the case of SIFR) but degrade to standard markup if JS is not enabled, also note that each of these play well with jQuery.
SIFR (Scalable Inman Flash Replacement)
First I must address the acronym, thought not the most relevant seeming, “Inman” is referring to Shaun Inman who originally conceived the idea of using the DOM and Flash together to support non-traditional typefaces. SIFR uses a flash object to render to the font face, and then Javascript to identify the DOM and replace the text as specified.
Pros of SIFR
- Text can be selected
- Does not violate EULA or copyrights, since font is contained within the SWF object
- You can easily add shadows, anti-aliasing, and other text effects in Flash
Cons of SIFR
- Slightly slower load times
- Requires both JavaScript and Flash to be enabled
My thoughts on SIFR
Some people complain that SIFR is harder to implement, but if you’re a front-end web developer it’s vital to learn and master new technologies including really basic flash. All you have to do is open the flash file included in the zip, change the font of the text to the font you want to use, and then publish it. Instructions are included on how to do this and if it is “too challenging” than you’re in the wrong field!
Many have also commented and argued that SIFR is no more secure to stealing a font file and using it on your website. While I do agree with that statement, the issue is a legal matter. Like it or not, and argue it as you may, Adobe Flash is legally allowed to embed and use fonts that the developer has purchased. This is not true for any of the others.
FLIR (Face Lift Image Replacement)
Using PHP (and the GD library) FLIR renders text into a font of your choice by reading the text in a DOM and sending a request to the server with that string and returning an image of that text rendered in the new font. It’s a very clever idea, and works behind the scenes, but it’s not without it’s quirks.
Pros of FLIR
- Does not violate EULA or copyrights, since font is rendered as an image
- Prints in the font rendered since it is an image
Cons of FLIR
- Requires PHP with the GD enabled
- Text cannot be selected
My thoughts on FLIR
While FLIR is fast and efficient with few flaws, one restriction I cannot overlook is the requirement for PHP and GD on the server. Many corporate websites (addressing the big guys, not the freelancers with this one) work exclusively with .NET on Windows/IIS servers without PHP installed at all. This eliminates FLIR from the mix for many websites unfortunately. In addition, FLIR disables the user to be able to select text. This is not a huge draw back if used on headings, but if used on a even body of text then you’re killing usability.
Cufon
Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation. Cufon uses the browser to draw vector objects using VML (Vector Markup Language) for Internet Explorer and the HTML 5 Canvas element for the more advanced browsers.
Pros of Cufon
- Faster load times than SIFR and FLIR, since it is all JS and nothing more
- Has all the strengths of Typeface.js with fewer weaknesses.
Cons of Cufon
- Violates EULA and copyrights due to fonts being embedded. Not many fonts are permitted to be rendered with this method
- Text cannot be selected
- You can’t apply a hover state to converted text
My thoughts on Cufon
For many, Cufon is the best solution to work with. It allows for rendering on the fly, and works well for a developer to match a design without having to replace each heading with an image. Cufon even works quickly with large bodies of text! One thing I remain disappointed about is text selection; if this library aims to provide a solution for larger bodies of text, then it seems that text selection is a must.
CUFON is Search Engine Friendly, as google wont not read <script> tags
As I have tested and worked with Cufon, I recommend it for the developer looking for a quick solution but only for personal or non-profit website. I’ve talked with a few professionals including a lawyer and confirmed that Cufon is not a legal solution for font-embedding on ANY website, but that unless you’re developing a large profile commercial site, you should be safe to use it freely.