Posted on May 8, 2009 - by ruby

Cufon text replacement with canvas and VML

For web designers among you who have been using sIFR, facelift or other image replacement techniques, and has facing problems in particular browser then you may need to try Cufon, a fast text replacement with canvas and VML.

Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use. To achieve this ambitious goal the following requirements were set and have been met:

1. No plug-ins required – it can only use features natively supported by the client
2. Compatibility – it has to work on every major browser on the market
3. Ease of use – no or near-zero configuration needed for standard use cases
4. Speed – it has to be fast, even for sufficiently large amounts of text

Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript. Cufon has been tested in Internet Explorer 6, 7 and 8, Mozilla Firefox 1.5+, Safari 3+, Opera 9.5+ & Google Chrome.

Cufón has been designed with developers in mind. Therefore the API is simple and configuration is usually not needed at all, as most of the needed information is provided by CSS style sheets.

The Implementation is pretty easy:

1. Download Cufon (recommended the YUI-compressed version)
2. Generate your personalized font
3. Replacing the text:

   <script src="cufon-yui.js" type="text/javascript"></script>
   <script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
   <script type="text/javascript">
   	Cufon.replace('h1'); // replace as necessary
   </script>
   

4. Avoid delay display in IE by adding this line just before body closing tag:

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

And you are done. Try some demos before you try it yourself