Monday, October 25, 2010

Multiple Fonts with Cufon

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">

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

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">; </script>


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

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.


For two fonts from the same font family with different weights(ie Myriad_Pro_400.font.js and Myriad_Pro_300.font.js), it works just fine. Please see this post.


Anonymous said...

very helpful thankyou.

Unknown said...

Where is this code going? Styls.css?

Unknown said...

Very Good stuff, Where do I place this code style.css? Thanks!

CSSBakery said...

Hi Nate, These go into the <head> of the document.

Post a Comment