Cufon — Custom Font Implementation

Getting custom typography on the web in 2009 is genuinely difficult. @font-face exists in the CSS specification but browser support is patchy and font licensing for web embedding is a legal grey area. The dominant alternatives are image replacement (maintenance nightmare, bad for accessibility) and sIFR (Flash-based, heavyweight). Cufon offers a third path: it converts font outlines to a JavaScript/JSON file and renders them using HTML5 Canvas — with an automatic VML fallback for IE, which has no Canvas support.

How It Works

1. Upload your font file to the Cufon generator at http://cufon.shoqolate.com/generate/. It converts the font outlines to a .font.js file containing the glyph data as JSON.
2. Include cufon-yui.js (the Cufon engine) and your generated font file on your page.
3. Call Cufon.replace() with a CSS selector to specify which elements should use the custom font.

Implementation

<!-- Include Cufon library -->
<script src="cufon-yui.js"></script>
<!-- Include your generated font file -->
<script src="MyFont_400.font.js"></script>

<script>
Cufon.replace('h1, h2, h3', {
    fontFamily: 'MyFont',
    color: '#333333',
    textShadow: '1px 1px rgba(0,0,0,0.3)',
    hover: true  // Enable hover color changes
});

// For elements added dynamically, call Cufon.refresh()
Cufon.now();
</script>

The Cufon.now() call at the end triggers the replacement immediately. For content injected into the page after initial load, call Cufon.refresh() to re-process any new matching elements.

Supported Options

• fontFamily — The name of the font as declared in the generated font file.
• color — Text colour. Accepts any CSS colour value including rgba().
• textShadow — CSS-style text shadow definition. Rendered natively by Cufon.
• hover — When true, Cufon re-renders the element on :hover, allowing you to specify a hover colour via CSS on the parent.

Pros

• Works in IE6 and above without any additional workarounds — VML handles the rendering automatically.
• Supports text shadows, colour gradients, and hover state colour changes natively.
• The font data is embedded in a JavaScript file served from your own server, avoiding third-party font licensing complications.
• No Flash or server-side dependencies.

Cons

• Text is not selectable. Canvas and VML rendering produces visual output, not DOM text nodes. Users cannot select, copy, or search the replaced text.
• Poor accessibility. Screen readers may not read Canvas-rendered text correctly. This is a significant drawback for headings and navigation.
• Slower rendering. JavaScript font rendering is measurably slower than native browser text, particularly on pages with many replaced elements.
• Requires JavaScript. If JS is disabled or fails to load, the fallback is the browser's default font — there is no graceful degradation to a web-safe font.
• Dynamic content requires manual refresh. Any elements added to the DOM after page load must be re-processed explicitly with Cufon.refresh().

When to Use Cufon

Cufon is the right tool when you need custom typography across IE6+ and your content is primarily decorative headings or display text where selectability and screen reader support are not critical. Avoid it for body copy, navigation links, or any text that users need to copy.

For new projects where IE6 support is not required, prefer @font-face with a web font service such as Google Fonts. Native font rendering is faster, fully accessible, selectable, and requires no JavaScript. See the post on @font-face Instead of Cufon for a full comparison and migration guide.