SEO implication of Cufón font replacement

Cufón is an increasingly popular font replacement technique similar to sIFR and typeface except it is much faster and does not require the use of flash.

Why use font replacement?

You might be wondering why do we even need font replacement with so many fonts already supported by web browsers? Well, this is because even modern browsers only support a fraction of the total number of fonts available today. Font replacement techniques allow font types that are not supported natively by browsers to be used and it also helps address EULA End-user Licensing Agreement issues associated with the use of third party fonts.

What about the CSS @font-face attribute?

The CSS @font-face attribute allows for fonts to be imported into browsers as shown in the example below. However, the problem with using the @font-face approach is that the end-user license agreement for most fonts, including free fonts, do not allow for the re-distribution of the font using the CSS @font-face attribute as this exposes the font file which can be easily copied.

Example use of @font-face in CSS:

@font-face {
	font-family: Sumo;
	src: url(Sumo.otf);
}

Example use of the imported font type in CSS:

Font replacement solutions such as Cufón and sIFR seek to remedy the EULA problem associated with using the CSS @font-face attribute by embedding the font in JavaScript or Flash (sIFR) making it harder for the font file details to be extracted or reverse engineered from the JavaScript or Flash code. Off course this would not stop the entire Cufon or sIFR code base being used on another site but at least it protects the font file from being used on other media types such as print or in documents such as pdf documents etc.

SEO implication of Cufon

So back to the question at hand. Is the use of Cufon good or bad or SEO? The quick answer to this question is that the use of Cufón has very little impact on SEO.

Cufón uses JavaScript to replace and display text in the desired font format using HTML5 canvas. As text replacement is implement by Cufon using JavaScript, the source code of the page, when you right click and view the source, remains unchanged; however, the dynamic source code which represents the actual source code of page displayed reveals the final cufon source code used to replace the original text as shown below. To view the dynamic source code for a page you would need a tool such as the Firebug plugin for Mozilla Firefox.

Example of the source code before Cufón transformation:

Example of the dynamic source code after Cufón the transformation:

The cluttered dynamic source code generated by Cufon should not be a problem for SEO if we assume, as it is widely held, that search engines do not execute JavaScript code while crawling websites. Although this is true, there are indeed many reported cases that suggest search engines do in fact execute JavaScript but the search engines themselves admit that any such execution of JavaScript code at present is purely experimental. It can be assumed however, that in the near future JavaScript execution by search engines will become common place as search engines try to “view” webpages as they are seen by users. If this happens, then the cluttered source code generated by Cufon is likely to have a negative impact on SEO. Haven said that, perhaps with the popularity of Cufon search engines would be smart enough to extract the text buried within the cufon source code.

Other things to consider when using Cufon.

• Style your default text so users who have JavaScript disabled or are using old browsers that do not support Cufon will still be able to see a nicely presented page.
• Check that major releases of browser updates do not cause issues with Cuffon. As of writing this, it is reported that the IE9 beta does not appear to work well with Cuffon
• Cufon might not be appropriate for use with some End User License Agreement which do not allow for the font details to be embedded in JavaScript
• HTML5 Canvas used by Cufon might be displayed slight different on different browsers. Make sure you check how your site looks on multiple browsers