mike afford media LOGO

Archive for the ‘fonts’ Category

Friday, September 25th, 2009

Cufón text replacement in Wordpress

Tolkien Fonts - cufon text replacement example

Tolkien Fonts - cufon text replacement example

I’ve recently been experimenting with Cufón text replacement, and decided to put it to use on a site I’ve been messing about with. I’d also been converting the whole thing to a Wordpress-powered site (more on that later), so it seemed to make sense to look for a plug-in to do the job.

So, the plugin is called WP-Cufon and you can get it at wordpress.org/extend/plugins/wp-cufon/

It’s quick to install, has good documentation, and it’s easy enough to specify some rules to control the text replacement on your site.

So for example I’ve used :

Cufon.replace('h1', { hover:true });
Cufon.replace('h2', { hover:true });
Cufon.replace('h5');
Cufon.replace('#navbar a');

which replaces the font for h1, h2, h5 headings and any link text within the ‘navbar’ div with a special font of my own making. All of the subsequent styling is covered by CSS. It really is very simple to set up.

You need to convert your font first into a format that Cufon can handle – there’s a Cufon generator that does the whole thing very neatly. It also, importantly, allows you to limit usage to certain domains to protect the font from use elsewhere.

…read more