Fixing Fancy Font Frustrations

Vector Text: typeface.js and cufón

The most recent method of text replacement borrows some ideas from sIFR but manages to avoid its reliance on Flash. Instead, both typeface.js and cufón are slightly different takes on the same basic idea: using JavaScript to replace HTML text with canvas elements that render the text in vector format.

Each method requires you to convert your font into a vectorized JavaScript file using their free online tools. Happily, this is a relatively painless process. These vectorized fonts are then linked to your page, rendered to a canvas area, and swapped into your page on-the-fly when JavaScript is available.

Pros:

• less technology-reliant than sIFR (no Flash requirement)
• degrades gracefully

Cons:

• JavaScript-reliant
• unclear licensing issues for many fonts

Of course, sIFR advocates would argue that surely anyone using a browser modern enough to support the canvas element is likely to handle Flash files too.

This is true enough in all but one important user case—at this time no iPhone or, for that matter, Android phone can render Flash content. That is a sIFR showstopper for many developers. The canvas element, however, already has excellent support in WebKit, the rendering engine which powers Safari.

Trying on cufón

Okay, let’s look at a quick example of using vector text in a design. I’m going to go with cufón here because it’s a marginally smaller file, but most of the key concepts apply to typeface.js too.

I’m going to start out with a rough blog concept that makes no attempt to customize or replace the headers. Inevitably some users will browse without JavaScript, so your page still needs to work nicely sans groovy fonts.

Step 1: Grab cufón

Download a copy of the cufón script and attach it to your document. This file handles all the swapping, scaling, positioning, and styling of your type:

<script type="text/javascript" src="cufon-yui.js"></script>

Step 2: Convert your font

As with Typeface JS, cufón needs you to convert your file into the vectors it uses, but this is a free and easy process. Simply upload your font—TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB), and PostScript fonts are supported—and their generator will give you back a new JavaScript file.

Obviously this is a good time to consider the licensing restrictions. While each type foundry takes its own view—often requiring a new license for each server or site—Adobe have been clear in stating their position:

That makes any and all Adobe fonts you own (such as Albertus, Bodoni, Caslon, and so on) the no-brainer choice for trialling this method.

Once you’ve selected and uploaded an appropriate font, you’ll be presented with a JavaScript file with a name along the lines of “your_font_400.font.js”. This file will need to be attached to your page after the cufón script. For the example, I’ve converted and attached two fonts—Pointy and AquilineTwo:

<script src="Pointy_400.font.js" type="text/javascript"></script>  
<script src="AquilineTwo_500.font.js" type="text/javascript"></script>

Be aware that there are two checkboxes on the generator that must be checked before it will allow you to proceed: one to confirm that the EULA of the font you’ve chosen permits font embedding, and the other to confirm that you’ve read and understood the converter's terms of use. Make sure you find them.

Step 3: Target the headings to replace

Let’s be clear: all text replacement methods (besides @font-face, arguably) are designed to replace heading text only. Replacing slabs of body text will be slow and counter-productive. We’ll stick to replacing headings only.

To replace any heading you simply use cufón’s replace function to target the element, and then define the font with a fontFamily. In the example below, I’m replacing all h1s and h2s with Pointy, and h3s with AquilineTwo:

<script type="text/javascript">  
 Cufon.replace('h1', { fontFamily: 'Pointy' });  
 Cufon.replace('h2', { fontFamily: 'Pointy' });  
 Cufon.replace('h3', { fontFamily: 'AquilineTwo' });  
</script>

Easy.

Step 4: The IE fix

As is often the case with Internet Explorer, we need to add extra code to make it work in that browser. Unmodified, IE users will see the original text load, followed by a visible flicker before the text is replaced. Thankfully the fix is easy, if slightly ugly.

Immediately before the closing body tag you need to add the following script element:

<script type=”text/javascript”> Cufon.now();  
</script>

Add this line and give your page a test.

As you’ll see in the demo page, the resulting render is quite fast and clean on most systems.

Cufón objects take their position from your CSS and automatically inherit any font-size, font-style, font-weight, line-height, text-shadow, and word-spacing values. Very cool stuff.

You’ll also see that each word is a separate, transparent canvas, allowing backgrounds, images, and other text to show through, and words to flow freely from one line to the next.

Is there a downside? Well, text selection seems to be a problem, although fixing it appears to be a priority for developers. I also ran into the occasional overflow issue and what seemed to be sizing inconsistencies. A full list of known problems and supported browsers can be found on the cufón project site—if you keep an eye on that you’ll be the first to know when those issues are fixed.

But all considered—this is new, raw, and a bit experimental still—cufón is an exciting and really promising development for web typophiles.