JQuery, Cufon and WordPress

Just at the moment the best font replacement technique around is cufón – so how to get this technique into your WordPress theme design?

You’ll need 3 javascript files – best to put them in the theme directory under /scripts

1. The Cufon javascript
2. The individual font javascript – downloaded from cufon – or use their excellent generator http://cufon.shoqolate.com/generate/ (not all fonts as .ttf will do the trick, there’s issues of licensing in terms of web embedding)
3. A custom script, very simple, just to activate.

The plan is to get the scripts loading in the WP header, and the best action hook for this is template_redirect – so, in functions.php

add_action('template_redirect', 'them_js_head_load');

function them_js_head_load(){

define(TH_TEMPLATE_URL, get_bloginfo('template_url'));

wp_register_script('cufon', TH_TEMPLATE_URL . '/scripts/cufon-yui.js', array('jquery'), '1.0');
wp_register_script('my_font', TH_TEMPLATE_URL . '/scripts/myfont.font.js', array('jquery'), '1.0');
wp_enqueue_script('fontsactivate', TH_TEMPLATE_URL . '/scripts/fontsactivate.js', array('jquery', 'cufon', 'them_font'), '1.0');
}

fontsactivate.js is as simple as you want to make it – just this, for example, will replace all post h2 headings on the page

Cufon.replace('.post h2');

Don’t imagine it’s a great idea to replace all the text on a page with a custom font, that’ll make the server chug a bit – stick with headings…