Cufon 101

Submitted by:Tim Kelly

Date added:29 January, 2011


Cufon 101

Tags: html cufon , cufon font , replace with cufon

Code Snippet:

/*1. Include the JavaScript for Cufon and the Cufon font*/
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/TitilliumMaps.font.js

/*2. HTML: Normal tags*/
<h1>Business Solutions</h1>
<h2>Business Insurance</h2>

/*3. Tell Cufon 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;