Error getting theme layout

Cufón Is Totally the Best Thing Ever

Posted @ 10:59 am by Grady Kuhnline | Category: Technology | 1 Comment

There’s a new-ish technology called Cufón that is a serious competitor to sIFR. Before we explain what’s so great about Cufón, let’s talk about how cool sIFR is and what both technologies do.

All over the web you can see examples of sites that use non-web-safe fonts, and with good reason: web-safe fonts are hideous. To get around the fact that users don’t have a fancy font installed, most sites rely on images for display text. The most common examples look like this:

<h2><img src=”/images/test/h2-how-to-apply-for-a-grant.gif” alt=”How to Apply for a Grant” /></h2>

Problems with Using Images for Text

  1. Each image must be downloaded from the server. This makes pages load slower and increases the load on the server.
  2. Each image must be individually produced with a tool like Photoshop. This means it is time consuming to implement.
  3. Each image must be re-done if the text needs to change. It’s impossible to manage images easily using a CMS.
  4. SEO is problematic. Even with an alt tag (which is often omitted), it’s still not as good as real text for SEO.

Traditionally, SolutionSet has used sIFR for websites that need dynamic text in a non-websafe-font. The big up-side of using sIFR instead of images is that it dramatically reduces the production time and even the page weight (the sIFR files are only downloaded once and then cached on the browser). Creating thousands of images and forcing user’s to download those images is a bitter pill to swallow just for some fancy text, but people do this all the time (don’t forget the SEO pitfalls of using graphics for text). There’s a technology very similar to sIFR, called FLIR, which uses PHP to generate the images on the fly which removes the issue of production time but still requires users to download a image for each header and also requires that PHP be available (this isn’t a scalable solution, it puts the load on both the browser and the server).

How does sIFR Work?
sIFR uses a combination of JavaScript and Flash to render text. There are only three basic components: a Flash file that you prepare that contains your font, the sIFR JavaScript file, and some declarations in JavaScript that describe which text to replace. Once the page loads, sIFR searches the page for — let’s pretend we want to replace all of our <H2> tags with our fancy font — all <H2> tags, measures their height and width, positions the real text off-screen and places flash file in its place. There’s already some good documentation on how to use sIFR on their site. Search engines see the plain text that exists before it is replaced with sIFR and normal visitors get to see fancy text. The best part of sIFR is the potential file-size savings over using graphic images and the increased server performance. All of the work is done by the browser when the page is loaded.

Original <H2>:
<h2>How to Apply for a Grant</h2>

After sIFR runs:
<h2 class=”franklin sIFR-replaced” style=””>
<object id=”sIFR_replacement_0″ class=”sIFR-flash” height=”31″ width=”335″ type=”application/x-shockwave-flash” name=”sIFR_replacement_0″ data=”/js/franklinGM.swf” style=””></object>
<span id=”sIFR_replacement_0_alternate” class=”sIFR-alternate”>How to Apply for a Grant</span>

It’s important to remember that even though Firebug shows the HTML after sIFR has altered it, what is actually sent to the browser (the source HTML) is the plain text shown in the original. You can see this in action on the homepage of one of our clients:

What’s wrong with sIFR?
The biggest problem with sIFR is how difficult it is to set up. Between Flash, CSS, and JavaScript, there are a lot of moving parts. It also requires that you have Adobe Flash installed in order to implement it (you need Flash to create the embedded font file).

The second issue is its overall quirkiness. Common problems with sIFR sites are the sIFR blink and the sIFR jump. You’ll see the sIFR blink if you load a page with sIFR and hit refresh. Either the text will show using a web-safe font momentarily or the text won’t show at all until the sIFR text suddenly appears. The sIFR jump is when the replaced elements change dimension slightly after sIFR loads. Often it looks like the page suddenly gets a few pixels shorter. You can see both of these effects on most website that implement sIFR (hit refresh a bunch on the sIFR homepage: Flash is a plug-in and renders in its own virtual machine outside the browser. This means that there are hard limitations as to how quickly it can execute.

Cufón is way better!
Cufón operates very similar to sIFR in principle but instead of using Flash to render fancy fonts, it uses the <canvas> tag in modern browsers and VML in Internet Explorer. Canvas and VML share a lot of common functionality and the basic idea is that they allow JavaScript to render vector graphics natively in the browser without the need for an external plug-in like Flash (there’s some really cool stuff the <canvas> tag can do). The key concept of Cufón is a recognition that fonts are essentially vector files and all browsers have a built-in ability to render vectors. Relying on built-in browser technology allows Cufón to operate extremely quickly and completely eliminates the sIFR blink and the sIFR jump.

Configuring Cufón is also a dream compared with configuring sIFR because Cufón relies on CSS for all of its styling cues. You can tell Cufón to replace all <H2> tags and even though, hypothetically, some are blue and 14px and some are green and 22px (depending on their context) they all get replace correctly with a single declaration of Cufon.replace(‘h2′). sIFR doesn’t make things so easy.

Cufón also avoids some the line measuring issues that sIFR suffers from by splitting each individual word into its own canvas tag which allows the text to flow naturally. It also works well within links, even natively supporting the :hover psuedo-class. There is a great how-to on the Cufón GitHub.

Original <H2>:
<h2>Lasting Impressions</h2>

After Cufón runs:
<span style=”width: 182px; height: 38px;” class=”cufon cufon-canvas”><canvas style=”width: 202px; height: 38px; top: 0px; left: 1px;” height=”38″ width=”202″></canvas><span class=”cufon-alt”>Lasting </span></span>
<span style=”width: 270px; height: 38px;” class=”cufon cufon-canvas”><canvas style=”width: 275px; height: 38px; top: 0px; left: 1px;” height=”38″ width=”275″></canvas><span class=”cufon-alt”>Impressions</span></span>

What’s wrong with Cufón?
Cufón works by converting a (presumably Web Embedding licensed) font into a vector file in plain JavaScript code. Although normal usage of Cufón means that only an extremely limited sub-set of glyphs are actually converted into JavaScript — each glyph added significantly increases file size, so it’s usually a good idea to limit the characters — it’s still a “copy” of the font and it’s freely downloadable. In order to legally use Cufón you need to obtain a special font license that allows for Web Embedding. According to the Cufón home page all Adobe fonts are safe for web embedding and many of the other font foundries offer Web Embedding licensing although none of them mention the actual price. Although every blog in the universe that ever reviews Cufón mentions the licensing as a big issue, the real problem is that companies like SolutionSet are going to have to start watching their font licensing more closely and we’re going to have to start forming policies for securing Web Embedding rights for the fonts we need to use. This isn’t really the roadblock it’s been made out to be; it’s just a change in process.

So, start using Cufón already!
Cufón is the best technology available on the market right now for using fancy fonts on the web. It’s easy to implement, it’s well documented, it’s SEO compatible. It’s also totally safe to use with Adobe fonts and it’s possible to purchase licenses for non-Adobe fonts. SolutionSet is going to be using Cufón on its next series of projects that would’ve normally used sIFR.

One thought on “Cufón Is Totally the Best Thing Ever

  1. seminds says:

    I was not sure when my designer suggested me to use cufon text to our new website. Cause I read few months ago it was not seo friendly. Guess it was just another myth. Thanks! Now we can continue with our design.

Leave a reply

Error getting theme layout