Today we’ll go over how to use Cufón font replacement to enhance the fonts on your site.
No matter which way we impliment Cufón there is some prep we need to do with our fonts to get them ready.
- 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.
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.
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>
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.
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.
(#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.
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.
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.
wp_enqueue_scriptfunction. Including it in script tags is a recipe for problems. I’ll cover the what and why of the function in the future.
wp_enqueue_scriptsaction makes sure that we don’t reference any scripts (specifically jQuery) twice on the admin pages.
Now we’ve got Cufón running directly in our theme with no plugin.