Cufon 101

1. Include the JavaScript for Cufón and the Cufón font

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/TitilliumMaps.font.js"></script>

2. HTML

Normal tags

<h1>Business Solutions</h1>
<h2>Business Insurance</h2>

3. Tell Cufón to replace the fonts for the specified CSS selectors

<script type="text/javascript">
    Cufon.replace('h1, h2', { fontFamily: 'TitilliumMaps26L', hover: true });
</script>

4. Add JavaScript error handling in case there is an error loading

function handleError() { return true; }
window.onerror = handleError;

5. CSS

The font color, size and hover color is controlled via the CSS classes associated with the HTML element.

h1 {
   font-size: 50px;
   color: red;
}