Tolkien Fonts - cufon text replacement example

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.

I’d previously looked at Scalable Inman Flash Replacement (sIFR) but I have to say I think Cufón may have the edge if only for ease of set-up – although, granted a lot of the hard work has already been done by the plug-in. Oh, and Cufon doesn’t use Flash.

I don’t claim to understand exactly how Cufon works, but if you’re interested in that kind of thing have a look at http://wiki.github.com/sorccu/cufon/about which goes into all the nitty-gritty.

And here’s a link to the creator of the wp-cufon plugin, Tobias Battenberg

OK, Tolkien fans

So this next bit is only really of interest to fans of The Lord of the Rings… (look away now if hobbits and dragons aren’t your thing!). No really.

The site I’ve used Cufon on is a Tolkien book collecting site – and I created a special font that brings to mind the calligraphy of the author J.R.R.Tolkien – I was pretty pleased with the end result, so if anyone’s interested they can buy a copy of Tolkienesque Regular (in Truetype font format) from my store.

I also ended up tackling another Wordress theme design from scratch – so the entire site has a kind of ‘Tolkienesque’ feel to it. That’s the name I gave to the theme too.

Tolkien Wordpress theme

The Wordpress theme makes heavy use of categories to organise the 400-odd entries, and has a neat ‘Random Item’ widget that I made to pull a text link and the first thumbnail image from a random post. Anyway, I was quite pleased with the end result. It’s been a labour of love built in spare minutes snatched here and there over the last few months.

But I’m most pleased by the fact that I can now use any old font I like in Wordpress, subject of course to EULAs and other legal niceties, or at least until the legal quagmire surrounding @font-face, font embedding and linking gets sorted out.

The changes to the basic proportions of the page were made by increasing the #page and #footer divs from 760 to 900pixels and adjusting the right sidebar content to be 250px wide (to match my own ‘content_sub’ div) and expanding the rest of the content to fill the gap.

Next I changed the basic colour scheme – or as much as I could using color values in the style sheet (text etc). I searched all the template files to see exactly where the background images appeared and then added my own versions (at the new widths) including a body background, a footer image that closes off the main grey box backround, and a new ‘topper’ image that does the same at the top (this needed a new div – added to the header.php file).

I changed the header box to be left aligned and smaller and removed the top margin from <h1> tag (blog title).

Lastly, I put a new DIV into the header php code – this is where I place all my own header content.  I also moved the background image from the body (to stop it scrolling when the browser is resized) into my own header code.

The last few tweaks were mainly little cosmetic changes – a bit of margin/padding adjustment and a new background colour and border around the comment boxes. And that was pretty much it.