Posted on September 26, 2011 by Curtis McHale

Using Cufón with WordPress

Today we’ll go over how to use Cufón font replacement to enhance the fonts on your site.

Prep

No matter which way we impliment Cufón there is some prep we need to do with our fonts to get them ready.

  1. Check the Font License – Not all fonts are licensed for use online so make sure that whatever you use it allowed to be used with Cufón if it’s not you take the risk of legal action for infringement of the license.

  2. Go to http://cufon.shoqolate.com/generate/ and convert your fonts to the format required by Cufón. For most projects I just pick one font weight and a simple name for the font. I’ve never needed to use any of the rest of the options so just skip them.

Now that we’ve got a font file that we can use with Cufón lets move on to adding it to our site.

####Theme Development

Tyically I simply add a class to any heading/menu/item that needs a special Cufón font associated with it. If I know I need two font (Museo 300 and 500 as an example) I’d use two classes like the example below:

<h2 class="museo-bold">Title</h2>

<h3 class="museo">Title</h3>

Yes this isn’t quite semantic but it makes only the headings we want to target easy to target with our javascript later.

###WordPress Plugins

First we’ll look at a plugin for adding Cufón to our sites. WP-Cufon. WP-Cufon is a simple plugin that does what it says, allows you to use Cufón with fonts on your site. We’ll use the stock TwentyEleven theme and change the site title to our 500 weight Museo and the menu to our 300 weight Museo.

Begin by going to the plugin menu and clicking ‘add plugin’. Then install WP-Cufon. Once installed a new menu item called Cufón will be available under the Appearance tab.

Cufon Plugin Appearance Menu

Cufon Plugin Appearance Menu

Once the plugin is installed properly the first things to do is set up our font where the plugin can see it. We need to create a folder called ‘fonts’ inside the wp-content/plugins directory. Now that the folder is created we need to put the font files we prepped in to the folder.

Now that our font is set up all we have to do is add the javascript to target our defined classes. Using Chrome or Safari you can simply right click on the title of the site and choose ‘inspect element’ then see the CSS we want to use to target our site title and menu. If you’re on FireFox the easiest tool to use is FireBug.

Cufon.set('fontFamily', 'museo500').replace('#site-title', {hover:true});
Cufon.set('fontFamily', 'museo300').replace('.menu', {hover:true});

The Javascript above targets our site title (#site-title) with the 500 weight and anything inside our menu (.menu) with our 300 weight. We also add the ‘hover:true’ property so that the new font stays when a user hovers over our text.

Menu and site title before and after

Menu and site title before and after

That’s it, we’ve got Cufón set up with our plugin but lets make a few notes about it before we move on to how to set up Cufón without a plugin.

At least once while using this plugin I’ve had it break on upgrade. While working on it I also found that it had bunch of debug output. Both of the above mean I just don’t use the plugin anymore even though it keeps working on a few sites I built a while ago, I’d rather know that it will just work with a few lines of code.

Despite my general dislike of plugins WP-Cufon is a solid offering. The thought the author has put in is obvious from the directions you get when you first install the plugin and the included tutorial on how to generate a font and use it within the plugin.

Great help stuff in wp-cufon

Great help stuff in wp-cufon

###No Plugin

I’ll acknowledge my bias against plugins now, I don’t like using plugins in general. I just find that too many plugins have way to many features and thus come with bloat. If you’re trying to build a site that’s fast you’ll also quickly find that plugins add their own script and CSS files that make it really hard to get any type of high rating on Google Page Speed or ySlow

While you could also put the code we’re about to write inside a custom plugin for the site, I feel that Cufón is a design element and thus rightly resides inside the theme not inside a plugin.

We’ll use a TwentyEleven child theme to add Cufón to our site. This means we won’t have our special classes to target but with a bit of CSS we can still target our headings and menus easily.

The first thing to do is actually create our child theme. If you’re not sure how then go read the Codex article on how to build a child theme.

The first thing we need to add to our child theme is our new font files. We’ll also need a .js file to hold our Javascript which will replace our fonts and a functions.php file to hold the proper enqueue code for our Javascript.

Lets start by opening our functions.php file and including all of the javascript we’ll need.

<?php

    function theme_t_wp_jsNotAdmin() {
      if (!is_admin()){
          wp_enqueue_script( 'jquery' );
          wp_enqueue_script( 'cufon', get_stylesheet_directory_uri().'/assets/js/cufon-yui.js', array('jquery'), '1.0', true );
          wp_enqueue_script( 'museo300', get_stylesheet_directory_uri().'/assets/js/museo300_300.font.js', array('jquery'), '1.0', true );
          wp_enqueue_script( 'museo500', get_stylesheet_directory_uri().'/assets/js/museo500_400.font.js', array('jquery'), '1.0', true );
          wp_enqueue_script( 'twentyelevenchildscripts', get_stylesheet_directory_uri().'/assets/js/scripts.js', array('jquery'), '1.0', true );
        }// end if is_admin new scripts go above this
    }
    add_action('wp_enqueue_scripts', 'theme_t_wp_jsNotAdmin');

?>

If you’re including Javascript in WordPress you should be using the wp_enqueue_script function. Including it in script tags is a recipe for problems. I’ll cover the what and why of the function in the future.

Our function above enqueue’s our Javascript files only if we’re not in the admin interface (notice the !is_admin line). Any time you’re adding stuff to WordPress you should make sure that it is only running when it has to. In our case we only need it if we’re on the frontend of the site so we make sure that it only runs there.

Unlike what many other tutorials suggest we’re not adding our javascript on the ‘init’ hook. While in our example we make sure we’re not using it on the admin end of WordPress using the wp_enqueue_scripts action makes sure that we don’t reference any scripts (specifically jQuery) twice on the admin pages.

We’re also using the get_stylesheet_directory_uri function since we’re using a child theme. If you’re building a regular theme with no parent then you’d use get_template_directory_uri.

Now that our javascript files are included on our site it’s a simple matter of adding our Javascript to our scripts.js file. It’s the same Javascript we used with our plugin.

jQuery(document).ready(function($) {

  Cufon.set('fontFamily', 'museo500').replace('#site-title', {hover:true});
  Cufon.set('fontFamily', 'museo300').replace('.menu', {hover:true});

});

Cufón doesn’t have it’s own selector engine so we need to make sure we use one from an existing javascript library. In this case we’re using jQuery. Cufón also supports Sizzle, MooTools, Prototype, Dojo and a number of other frameworks so feel free to choose the framework you’re most comfortable with.

Now we’ve got Cufón running directly in our theme with no plugin.

Menu and site title before and after

Menu and site title before and after