Tutorial: Cufon Text Replacement Without A Plugin in WordPress

Cufón fonts is a jquery script written to help webmasters change the font on their site. This is done without using the CSS @fontface trick or even loading the font file to your own server/ shared hosting web space.

Now, there is a plugin in the WordPress Plugin Repository called WP Cufon that does this, but because I like to not use so many plugins, I am going to lead you through a tutorial that you can bypass the use of this plugin.

Step 1: Download the Cufón jquery files (located in Source section)

Step 2: Convert your font to the cufón replacement.

Step 3: Load your files to your server – preferrably in the js folder in your theme’s folder

Step 4: Open up your theme’s header.php file and add the following lines before the ending head tag

<script src="<?=bloginfo('template_url')?>/js/cufon.js" type="text/javascript"></script>
<script src="<?=bloginfo('template_url')?>/js/YOURCONVERTEDFONTNAME.js" type="text/javascript"></script>

To replace the codes you want, you will have to use javascript code in your header.php file and specify the exact CSS elements that you want to replace.

Also, remember when you converted your Open Type or True Type font over to the cufón file and had to name it… you will need to use that when specifying what font you want to put in.

For example:

<script type="text/javascript">
Cufon.replace('h2.widgettitle', { fontFamily: 'YOURFONTNAMEHERE' });
</script>
<script type="text/javascript">
Cufon.replace('#mainmenu', { fontFamily: 'YOURFONTNAMEHERE', hover: true });
</script>
<script type="text/javascript">
Cufon.replace('.navigation', { fontFamily: 'YOURFONTNAMEHERE', hover: true });
</script>

Note, where YOURFONTNAMEHERE is – that is where you put the exact name of the font. You may have revised the name… but that has to be exact.

Please note that some of these that are links have a hover:true because if it does not, your hover will not work correctly. Also, another note- some fonts may not convert due to licensing and some that have licensing, well… you need to make sure when you are using Cufon text replacement that you are within those licensing guidelines.