A couple of weeks ago I got an email from Ben who said
“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 are three (fairly) easy steps to WordPress custom font heaven with Cufon:
- Choose a font, and upload it to the Cufon Generator
- Let Cufon work it’s magic, and then download the new font .js file
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/.
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!
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:
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!
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…