cufon

Custom Fonts in WordPress with Cufon

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

cufon

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.

sifrAnother 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?!?!

CufonThe 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…

Select the font

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).

Use the following glyphs

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.

security

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

Let's do this

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:

<script type="text/javascript" src="/js/ChunkFive_400.font.js"></script>

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:

<script type="text/javascript" src="/js/cufon-yui.js"></script>

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!

<script type="text/javascript" src="/js/ChunkFive_400.font.js"></script><script type="text/javascript" src="/js/cufon-yui.js"></script>

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:

<script type="text/javascript">// <![CDATA[
      Cufon.replace('h1, h2, h3, h4, h5, h6');
// ]]></script>

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

<script type="text/javascript">// <![CDATA[
      Cufon.replace('#introduction');
// ]]></script>

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…

12 thoughts on “Custom Fonts in WordPress with Cufon”

  1. You’re going to postpone looking at the only standard based way of doing it and instead focus 500+ words on a technique that was panned as soon as soon as it was released? Cufon is a joke, as was sIFR before it. You’re better off using @font-face or going with out.

  2. I don’t think Cufon is a joke, especially for all those users who have older browsers and can’t render @font-face. I’m sure I read somewhere that the creator of Cufon saw it as a bridge until there was full cross-browser support for @font-face, and I think that’s a fair summary.

    The stats on the sites I work on clearly show that we’re not there yet, and I see Cufon as a real world solution. Cufon does arguably render a lot nicer too.

    That said, I’m not here to prescribe a solution to anyone. I use @font-face and sometimes I still use Cufon. I like TypeKit and the new Google Fonts API is also interesting. They’re also significantly easier to use than @font-face (both from a code and liscensing point of view – getting fonts ready for IE can be difficult, especially for newer designers).

    Thanks for your thoughts – I don’t disagree, but I also don’t think it’s as simple as @font-face or nothing. Yet.

    1. That depends… If Google has the font you’re after then perfect, I definitely use it. Cufon was around before Google came on the scene, and it allows you to embed any font you have the license for, and to host the files yourself. Some people prefer that flexibility.

  3. Thank you very much for the helpful font. But unfortunately it didn’t help me at all with arabic support fonts. I’m still looking painfully for any wordpress plugin that supports customized arabic font but hopeless :(

    Any suggestion?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>