Use any Font with Cufon

Usage: Allows embedding of non-standard fonts without needing flash

Typography is one area of web development that has seen painfully little advancement when compared with other areas of the industry. Web developers have been forced to rely on a small set of ‘web safe’ fonts that are likely to be installed on the majority of their visitor’s computers. Image and flash-based solutions have arisen, both of which have downsides to using.

Cufon offers developers a robust and fast solution, which can be displayed in the browser without requiring third-party plugins using features built in to browsers. Cufon fonts can be used as VML for native IE implementation, or the <canvas> element for other more capable browsers. Awesomely, we can also set different styles of the replaced text, such as its color and size using pure CSS.

Usage

This library differs from the others in that a little bit of preparation is required before use; a new font file needs to be generated which can be done easily using the cufon website. The will generate an SVG font and save it in a JS file. This file needs to then be linked to any other <script> resource after the cufon core file:

<script type="text/javascript" src="cufon.js"></script> <script type="text/javascript" src="Breip_500.font.js"></script> 

Then it’s just a case of telling Cufon which elements to replace:

<script type="text/javascript">  Cufon.replace('h1.replacedFont'); </script> 

The API offers other solutions for using multiple fonts on the same page and for improving performance in IE. Although I’ve called this section, "Using any Font"… you should remember that only fonts that are licensed to be embedded should be used. The following screenshot shows a replaced heading: