“I would love to know how you do those header custom fonts …!!”

Well, without wanting to turn this blog into an episode of Why Don’t You I thought I should really answer this question on the blog so that others could have a read.

Custom Fonts, different options and the pros and cons

First of all, there has always been some debate on the pros and cons of using custom fonts. In the old days, when people used to use IE6… What? They still do? Oh. Okay, well a few years ago the only way to use custom fonts on your site was using images. Image replacement has got more sophisticated with CSS techniques, and there’s a comprehensive round-up of these techniques over at the marvelous CSS Tricks. However, this is still image replacement – in other words, you’re looking at a graphical representation of the text and not the text itself.

Another popular way to use custom fonts is the flash replacement technique, and sIFR is one of the heavyweights in this area. Until relatively recently this was the most popular way to get ‘real’ fonts on your page with only a couple of drawbacks – the (slight) increase in page load time, and the fact that some browsers are set up to block flash (adverts).

There is some truth that not everyone has Flash installed but to be honest I’m not that interested in supporting them. We’re talking about a handful of visitors a year and, like the 1% (or less) that have JavaScript turned off I simply can’t justify penalising the other 99%. Sure, make your site IE6 compatible, but don’t lose any sleep over supporting Flash or Javascript.

Which brings us nicely on to Cufon, which uses Javascript to display custom fonts.

Javascript? Fonts? How does THAT work?!?!

The special headings on this site (which is an open-source font called Chunk Five) are rendered using Cufon. For the techinically minded amongst you (and I don’t count myself in that illustrious bunch ) Cufon converts font paths to VML paths, stores this information as JSON (JavaScript Object Notation) and then renders the fonts using JavaScript. This is clever stuff, but we need not worry about the complex jiggery-pokery.

There are three (fairly) easy steps to WordPress custom font heaven with Cufon:

1. Choose a font, and upload it to the Cufon Generator
2. Let Cufon work it’s magic, and then download the new font .js file
3. Upload this file, and add a couple of bits of javascript to the of your page

Step One

Choose your font

Step one is easy enough; just place the TrueType/OpenType/Printer Font Binary/PostScript file(s) somewhere handy, like on your desktop. Now you may have downloaded these files from an free font library, or you may be copying them from your fonts directory, but you must consider the legal implications of using the font.

A word on the law

Do you own the right to use the font? If it’s a commercial font, have you paid for it? If you downloaded it from somewhere like DaFont you must check the licensing that accompanies the font. In short: keep it legal, kids.

If you’re not sure if you have permission to use your font then you might want to look at a service like TypeKit which I talk about below!

If you’re happy with your font then it’s time to upload it to Cufon, which you do over at http://cufon.shoqolate.com/generate/.

Step Two

Let Cufon work it’s magic

There are a few things to fill in, but they’re fairly straightforward. Let’s look at some of the common options…

To save space, and therefore page load time, only choose the styles that you know you’re going to use. For example, I didn’t use the Italic or Bold Italic typefaces for  this site which makes the font.js file that little bit smaller (and so load that little bit quicker).

Take your pick really. You may adopt a ‘kitchen sink’ approach and go for the lot (as above) or again just choose those glyphs you know you’ll need. There are further options such as ‘Latin Extended’ and ‘Russian’ but you probably won’t need these. Unless you Russian. Or Roman.

This is a really good idea. Restrict use to your own domain to stop thieves, squatters, and copyright issues!

Finally click the Let’s do this! button to download your newly created .font.js file!

Step Three

Upload and add some script

This next bit is entirely down to you – you’ll need to upload the .js file to your site somewhere, and make a note of the path. Let’s assume you upload ChunkFive_400.font.js to the www.example.com/js/ folder. We could include this file in a page using the following:

You need to to do the same with the Cufon file, which you can download from http://cufon.shoqolate.com/js/cufon-yui.js. Again, you’ll need to include this in your page like so:

Of course, you could change that path to wherever your Cufon .js files are located. We now need to add them to your site, by placing them somewhere in the section. If you don’t know how to do this, the easiest way is to enter your WordPress admin area, and go to Appearance > Editor. In the editor, select the file called header.php where you’ll find the head section, and problem see some other javascript files that are included. Just drop your two lines of code in there!

One final thing. You need declare which bits of your page to change to the new custom font. Again this is pretty easy to do. If you want all your heading tags to take on this new font you might use something like this:

You could even describe specific areas on the page using jQuery, like so:

This would make all text in take on the custom font. Cool :)

If you wanted, just take a look at the source code for this page – that might help explain things a little better!

Wp-Cufon

If that sounds too much like hard work, and it really shouldn’t, you could take a look at a WordPress plugin which does some of the heavy lifting for you. You can find Wp-Cufon at http://wordpress.org/extend/plugins/wp-cufon/installation/ but, to be honest, I encourage you to do this yourself because you’ll learn so much more about how Cufon works. In fact, even if you use the plug-in you still have to create the .js font file yourself.

font-face, Typekit and others

This post is already quite long enough, so I’m going to postpone looking at @font-face and Typekit for a later post. I’m going to postpone. Geddit?! I’ll be here all week…