How to use Cufon replacement feature

This tutorial will show you how to use Cufon plugin with WordPress. Cufon is a jquery plugin that allows you to use custom fonts on your website and guarantees that custom fonts will have same appearance for all visitors.

Cufon font-replacement feature in WordPress can be activated installing the WP-Cufón plugin. Before you proceed please check the following video tutorial on how to install plugins in WordPress.

1. First you have to convert your font-file into a Cufón compatible format. Currently TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) formats are supported.

2. You can do this by using Cufón’s own generator at http://cufon.shoqolate.com/generate/

3. Open /wp-content/plugins/ folder and create fonts folder. There you’ll upload the cufon font files (.font.js). The Plugin will recognize your uploaded fonts and activate them.

4. Open WordPress admin panel, go to Appearance>Cufon.

5. Into the Your Cufón replacement-code field input the font replacement code. For Example:

Cufon.replace ('nav a', { fontFamily:'Myriad Pro', hover:true});

Cufon.replace ('.entry-title, .page-title, .widget-title', { fontFamily:'Myriad'});

(click to enlarge)

You should define the HTML element (h1 – h6, div, body, a, input etc) or some css class or ID (.entry-title, .widget-title, #content etc) and font family.

Font family name could be found in your .font.js file ( Cufon.registerFont({"w":205,"face":{"font-family":"Vegur Bold", … )

6. When you are done click Save Settings at the botom of the page.