I love Cufon. It's easy, lightweight and fast. Cufon is scripts that embeds external font files in your webpage and it's gaining popularity rapidly. I see more and more implementations it mostly it just looks impressive. The headings on this site are also Cufon.
Heads up: you can familiarize yourself with Cufon+Drupal without doing the work, by downloading the Free sooperthemes.com basetheme.
Step 1: Downloading the Cufon package
You can download the minified version free of charge. We're going to load and implement Cufon through the theming layer, so download to your theme folder.
Step 2: Get yourself a Cufon font
Making fonts for Cufon is easy, you can take any TrueType or OpenType font and upload it to the Cufon Generator. This is what I love about Cufon, the generator tool does not only allow for easy conversion of the font, but also for optimization. With a few mouse clicks, you can select a subset of characters that you want to use in the font, and if you're still not happy with the filesize you can optimize the paths.
Filesize can differ hugely between fonts. Some fonts can look great and weigh only about 15kb, but more complex fonts can easily get to around 1000kb!. The key factor is the amount of paths in the letters. Normal lettering has just a handful of paths in each letters, but it's the fancy fonts you have to look out for, such as these:
They may look great, but is it worth the large download time and resulting flicker that may occur during reading.
Download the .js file from the generator to your theme folder.
Step 3: Invoking Cufon
The Cufon script doesn't do anything by itself, you need to tell it where to go. Thankfully, Cufon integrates with jQuery, and you can use a jQuery selector to steer Cufon to your headings. If you just want to replace all headings, your invocation script would look like this:
Cufon.replace('h1, h2, h3, h4, h5, h6');
In my premium drupal themes I use a more elaborate invocation:
Cufon.replace('h1#sitename a,.nodetitle a, #navbar > ul > li > a', {
hover: true
});
Cufon.replace('h1, h2, h3, h4, h5, h6, p.mission, p.slogan, .views-field-title, legend:not(.collapse-processed)');
Firstly, there is a separate selector for links. They get a separate invocation with the hover option set to true, so that the hover styles get properly processed by Cufon. It says in the documentation that Cufon is slower with hover set to true, so you may not want to use it on all your headings.
Secondly, there is a big selector that targets all other headings, as well as some Drupal native styles such as the mission, slogan, and views headings. The last bit might strie you as odd, it's a CSS3 style jQuery selector that targets all form fieldset legends except for the ones that use the Drupal native fieldset collapsing script. There seemed to be a conflict with Cufon and the collapsing script.
If you're happy with your invocation script, safe it in your theme folder as invoke-cufon.js
Step 4: Letting Drupal know about your scripts
We're going to open up your theme's .info file for this step. In your theme folder, there should be a .info file (Drupal 6 and up). The file contains a bunch of lines telling Drupal about the regions, meta data, and file that load with the theme. Add the following lines to the info file:
; Cufon Scripts
scripts[] = cufon-yui.js
scripts[] = Myndraine_400.font.js
scripts[] = invoke-cufon.js
The script path is relative to the .info file and the filenames should reflect the names of the files you downloaded, so you need to change at least the name of your font file. It is important that you get the order right. If you don't lead the main Cufon file first you'll be spawning Javascript errors on your website!
Any time you add something to the .info file you need to clear the theme registry, you can do this by hitting the "clear cached data" button at the performance settings page.
If you did everything correctly you should now have awesome typography on your Drupal website, congratulations! If something went wrong just drop a comment below.
Can I use font X, Y or Z??
Unfortunately, font embedding and licensing form a complex issue. With most free fonts you'll be fine, with most commercial fonts you're going to have to pay extra for a webserver font license. From the Cufon website:
Fonts produced by the following foundries/vendors/creators are known to be safe: Adobe Systems. The following are known to require separate or extended licenses for Web Embedding: Berthold (separate), FontFont (separate), Fontsmith (separate), Hoefler & Frere-Jones (separate), ITC (separate), Linotype (extended).
So according to him you can embed Adobe fonts with a regular license. For most other Foundries you have to pay for a special license, and costs vary with foundries and with fonts. I've communicated with ITC a couple of times and they charged around 300 USD for their extended license.
