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>


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 }); 

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; 


  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.