Multiple Fonts with Cufon

Warm and windy day, the water was delicious.

To replace one font with Cufon generated font:

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Eras_Light_ITC_400.font.js"></script>
<script type="text/javascript">
  Cufon.replace('h1');
</script>  

This code replaces all h1's to a Cufon generated Eras Light.

To replace multiple fonts with Cufon the syntax changes because we have tell the Cufon script that's running in the browser (cufon-yui.js file) which font family to use. I am going to convert my h1's to Eras Light and h2's to Eras Demi so:

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

<script type="text/javascript">
  Cufon.replace('h1',{fontFamily: 'Eras Light ITC'} );
  Cufon.replace('h2',{fontFamily: 'Eras Demi ITC'} );
</script>

If you don't specify which font to use for whom then you will be writing over everything else that comes before you. Eras Demi will be wiping out the Eras Light for example.

This may change in the future but for awhile now, I've using Cufon generated titles in this blog. The title of this post "Multiple Fonts with Cufon" is an example.

Cufon site also recommends the following to fix an IE glitch. I had tried and not seen much difference with this. It goes right before the ending body tag:

<script type="text/javascript"> Cufon.now(); </script>

WITH MORE THAN 2 FONTS

Let's try three fonts for testing. First I converted a couple of additional font files using the Cufon Generator, then I setup Cufon on my page like this:

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

Then I applied three different fonts to elements of my page, like this:

<script type="text/javascript">
  Cufon.replace('.cufon, h2',{fontFamily: 'vegur'} );
  Cufon.replace('.dtreviewed',{fontFamily: 'Book Antiqua'} );
  Cufon.replace('.author-name',{fontFamily: 'Calibri'} );
</script>

It works fine. If you are having trouble with using more than two, I would bring up Firebug, go to Console, and reload the page just to make sure you don't have a Javascript error somewhere.

CUFON

• Cufon with Same Font Family/Different Weight
• Multiple Fonts with Cufon
• How to Generate Cufon Based Text
• Cufon Flash of Unstyled Content
• Information on Cufon Based Text