In my last post regarding sIFR, I compared sIFR against a few of the other popular font replacement methods such as Cufon and FLIR. Since there is obviously a great deal of interest in the subject of font replacement, I figured it would be beneficial to show a deeper analysis at sIFR which I believe is the superior out of the three.

A deeper look at pros of sIFR

sIFR is quite different to the many font replacement techniques in the wild. Instead of manually generating each header through an image generator such as FLIR and Cufon do, sIFR is able to load a flash object and replace each element on the fly. The scripted effect works for roughly 95% of world wide web users according to statistics for Flash support and JavaScript support in modern browsers. Note also, that sIFR is by no means required, and degrades gracefully if the user does not have one of these components required. I’m sure some purists would react with contempt, but this method causes no harm to usability and only effects load time if used incorrectly (such as replacing body text rather than headers).

sIFR… what’s not to love?

First and foremost, implementation can be slaughtered. For an inexperienced developer, sIFR can take up to an hour to implement (from what I’ve heard in complaints anyways) and can cause pages to load slowly. From my experience, both are due to an incompetent developer, as sIFR is quite easy to implement if you understand all front-end technologies (which you should be a front-end developer) and only causes slow load time if its used for large blocks of text. Compare sIFR to the first wave of Web 2.0 technologies.. to this day I see wannabe developers implementing 20k+ javascript libraries to do one simple “jiggle” or “ajax” ability, which you can do with a few lines of code if you understand raw JavaScript. We can’t blame the technology for human error.. sIFR is brilliant. It may have a ways to go before it’s perfect, but respecting the principles of semantics, usability, and accessibility.. sIFR by far is winning the race against Cufon and FLIR.

Now to address the purists and their complaint about flash and JS dependency. Plain and simply, if a user falls within the 3-10% that doesn’t have Flash or JavaScript enabled, then BIG DEAL. That’s what good old HTML/CSS are for.. a fall back solution. Should we punish those with modern browsers and technologies for the minority that will get a slightly-less-quality rendering? I don’t punish modern browsers by neglecting the wonders of CSS 3. If Internet Explorer sees a box with square corners instead of rounded.. BIG DEAL. So why should we fight about whether a user has JS or Flash enabled? Heck, you can even use image replacement at that point, if you really want to.

The Big Picture

The real issue is that there aren’t enough fonts supported in Internet Explorer. If we want to point fingers and find something to criticize, there it is. Firefox, Safari, Chrome, Opera.. they’re all supporting more CSS properties such as @font-face. However, due to copyright laws and support from Internet Explorer we are bound to 5-10 fonts that we can reasonably assume the user has installed, and that’s ALL we’ve got. Solutions have been offered and argued but the problems are still much broader.. ranging from font licensing, support and rendering, with no clear solution in sight.

sIFR is one solution of many offered by developers fighting a war for creative freedom. It’s here and now, it’s legal despite the font, and regardless of the few quirks.. it’s usable. If you use it, then I hope you implement it well. If you protest it, then I hope you have valid reasons, and aren’t just complaining because you’re ignorant. Take this post with a grain of salt.. it’s my 2 cents and nothing more.

Read further:

Cufon vs sIFR vs FLIR
Style vs SEO
Fonts and the Law

• 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.

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.

If you’d like to learn more about Cufon, check out the tutorial on TutsPlus.

Read further:

Cufon vs sIFR vs FLIR
Style vs SEO
Fonts and the Law

1. Web Developer – This extension is crucial. With it you can turn off cache in the browser, disable javascript, cookies, styles and images, view and outline different elements on a page and see detailed information such as classes and id’s, resize the web browser window to see what it looks like in other resolutions, and do validation (among MANY other capabilities).
2. Firebug – This extension provides a console for JavaScript as well as lets you inspect HTML and CSS on a page. What I especially like about this extension is you can edit HTML and styles inline and see the changes before applying them.
3. GreaseMonkey – A fun extension that will completely change the way you interact with the web. I recommend the lightbox functionality and Platypus extension for starters and just look around and see what you can find. There are so many cool scripts for this extension.
4. Colorzilla – This extension is like the eyedropper tool.. it lets you find the colors of elements on a page as well as literally any image/color that you see anywhere within the web browser window. It gives you the RGB values, Hex Value, X and Y coordinates of that pixel, as well as the element name that the color is pulled from!
5. FireFTP – Turn your web browser into a full FTP client and debugging environment. This extension is really nice since it works, looks, and functions the same across all Operating Systems.
6. Image Zoom – Zoom in/out images. Pretty simple and easy to use, adds really simple functionality just using simple mouse click and scroll techniques.
7. SeoQuake – An SEO toolbar that will GREATLY help you to view SEO stats on a site. It’s a little heavy on load times especially on engines, but it’s highly customizable and very very useful. It’ll take some getting used to and customization, but once you’ve got the kinks worked out, you’ll be glad you have it!
8. MeasureIt – Is an extension that will sit in your bottom left corner right next to colorzilla. It’s great because it gives you a lightweight screen ruler that also gives you the X and Y coordinates of the measured area!
9. ErrorZilla – An extension that makes use of useless 404 pages by giving you a menu to do a whois lookup, view google cache, wayback machine and more! This extension is minimul and remains behind the scenes until you actually need it! Nice.
10. XRay – Similar to firebug’s inspection tool or CSS Viewer… it’s an awesome script that lets you view elements and tags on a page and will really help you out in debugging and developing.

If you want some more cool extensions there are some great ones that are OS specific or version specific. Check out the post on Noupe for 20 really cool web developer extensions. There’s also a great list of some of the most popular extensions at Mashable or OnlineTips.