SERVICES   |   PORTFOLIO   |   TESTIMONIALS   |   TUTORIALS   |   CONTACT   |   BLOG   |   ARTICLES

• 
• 

Cufon Technique for web page custom fonts

One of our recent project demanded custom font family for web pages. Upon a whole lot of research and evaluating pros and cons of different methods to use custom fonts on remote web pages, we finalized on ‘Cufon’ method to do the same.

Cufon is basically a javascript text replacement technique which takes the font, renders every character with its information like color, size, etc and replaces original text.

Other text replacement techniques are sIFR and @font-face. But we would vouch for Cufon as it is

• Browser independent. We have tested Cufon technique in Google Chrome, Firefox, Safari, Opera, and Internet Explorer and it works fine.
• Requires no plug-ins
• Fast to generate
• Easy to use

One important thing we might have to consider is try and not use the same for the entire website content replacement, which might make the website slow. We have used cufons mainly for header tags / titles / sub-titles and the site has not slowed down.

How to Create and use Cufon:

• Download the basic javascript file - cufon-yui.js ( which is easily available)
• Use Cufon generator, like the one found in http://cufon.shoqolate.com/generate/ and upload your font (True Type (TTF) / Open Type (OTF) / Printer Font Binary (PFB) / Post Script fonts) to obtain cufon javascript file for the same
• Include the above javascript files in your website directory
• Call the same in your web page header
  example -
  <script src="cufon-yui.js" type="text/javascript"></script>
  <script src="mycustomfont.font.js" type="text/javascript"></script>
  
• Cufon replacement script can be called either in the header or just before you close the body tag.
  <script type="text/javascript">
  Cufon.replace('h2');
  </script>

We would suggest you to call Cufon replacement script just before closing the body tag so that the page content is all loaded and later the font family is replaced with cufons.

Tags: Custom fonts for website, javascript to create custom fonts, cufons