Good Typography Using Text Replacement and Cufon in web design

Text replacement using Cufon

I you're a web designer, you more than likely feel a little restricted sometimes on what fonts you can use designing a web site.  Arial, Times New Roman are great sometimes, but what if you've found a fantastic font which you NEED to use?  Big peppers website uses this method.  Look above at our title, this uses Cufon.

 

This is now easy to do with a little tinkering.  Text replacement has seen a big increase in the last couple of years.  Text replacement uses Javascript to replace traditional fonts with a font of your choosing.  Cufon has simplified things.  To use Text replacement, all that is needed is too javascript files, which you should include in your <head> of your document.

 

Firstly, download this file: cufon-yui.js

Secondly, go to the Cufon Generator.

 

The generator allows you to upload your custom font, and will then give you the option to download this font as a Javascript file.  The generator will also ask you to give the font a custom name (remember this custom name, keep it simple, you'll need it).

 

Both these files should be included in your web document. 

 

In order to change an elements font, say a <h1>, you'd use Cufon.replace('h1');

Put this code in your javascript.

This will change all your HEADING1 titles to the font of your choosing.  You can use any selector in the same way.  It's that simple!  Any questions, get in touch.