Use Cufon In Your Thesis Theme Without a Plugin

I am a fan of using Cufón for non-standard web fonts on the sites that I build. I’ve used it extensively and have become really familiar with the system and its ease of use. I thought I’d put together this simple tutorial on how to use Cufón and then also how to integrate it into your Thesis theme. I’ll also share some quick tips that I picked up which have really helped.

Once you become familiar with how to use it, you can literally get custom fonts implemented within minutes. It’s probably not as fast to get going as say the Google Font API, but I just prefer the way Cufón renders the fonts. You could also use the @font-face method which works well, although this tutorial is specifically about Cufón.

Adding custom web fonts to your site can go a long way to improving the overall design, but one thing to keep in mind is that you should use them sparingly. I typically use custom fonts for such things as headers and titles. I wouldn’t recommend replacing all the text in your paragraph tags with custom fonts. Anyway, lets get started.

Step 1 – Generate your font

Although there isn’t a specific order of events, I basically do this first. Also, as I’m going through these steps, I’m going to show you how I complete the process. There are other options as you will discover, but this is how I do it and which I’ve found works best.

You need to use the Cufón font generator to generate the .js file of your font. Before you even start, make sure the EULAs of the font you want to use allows for web embedding. You can read more about that on the Cufón site. Once you know which custom font you want to use, copy the font file to your desktop temporarily. You’ll delete it when done. Currently only TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts are supported.

Open the Cufón font generator in your browser. There are many options on that page, but here’s the parts I complete. You can click the images for a larger view:

Select the fonts you’d like to use
Mostly I just have a need for a specific font and don’t care about bold or italic, so I just use the “Regular Typeface” field and upload the font file. You can upload the bold, italic and bold italic variations if you’d like. So over here, you’re just uploading the font file you had saved on your desktop. Then be sure to click the EULA box to confirm they allow web embedding.

Include the following glyphs (if available)
These next set of options are also up to you as to which ones you want to select. I usually check Uppercase, Lowercase, Numerals and Punctuation. I leave “Basic Latin” checked.

Performance & file size
You can use the security field for the purposes shown on the Cufón site if you’d like. For the Performance & file size option, I check the “No thanks” box. I found by doing this it solves some issues I’d experienced with font size.

Terms
And the last part here is to agree to the terms by checking the applicable box. Then click the “Lets do this!” button.

Step 2 – Copy the files to your server

Okay, great. We’re making good progress here. After completing the first step, you will have downloaded a new file with a .js extension. This is the font file that the Cufón generator created and which will be used to render the font. At the top of the page you just used to generate your font file, you will see a button that says “Download”. Right-click that (if you’re using a Windows PC), if you’re using a Mac, well you don’t have a right mouse button. I’ve always been perplexed by that. But if you’re using a Mac, I’m sure you’ll know what to do. You just need the main Cufón file called cufon-yui.js. Download it and save to your desktop.

Now make a new folder called “js” inside your custom folder. So here: /wp-content/themes/thesis_x/custom/js. Copy the font file along with the cufón file to this folder using filezilla, or other FTP program.

Step 3 – Update your custom-functions.php file

Alright! Let’s make this work now on your website. Go ahead and paste the following code into your custom-functions.php file and then save and upload it to the custom folder inside your Thesis theme. Before you upload it though, keep reading because you will need to change some lines according to your unique requirements.

function cufon() {
?>
<!-- cufon -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/custom/js/your_font_filename_here.font.js"></script>
<script type="text/javascript">
	cufon.replace('h1', { fontFamily: 'My Favorite Font' });
</script>
<!--end cufon -->
<?php
}

add_action ('wp_head','cufon');

// added for IE
function cufonie() {
?>
<script type="text/javascript"> cufon.now(); </script>
<?php
}

add_action ('thesis_hook_after_html','cufonie');

Quick Tip: After you complete this tutorial and you find the custom font is not showing up, or maybe it’s showing in Firefox and other browsers but not IE (which happened to me) here’s something you can try which worked for me. You can read more about it here (Item #1) Just add this line before line 4 above:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Now be sure to update the font filename on line #5, and pay close attention to this line:

cufon.replace('h1', { fontFamily: 'My Favorite Font' });

There are so many options you can set here depending on what text effects you’d like to add such as text shadow, whether you want multiple fonts, and also more importantly, which part of your site you want to change to the custom font. You should change the ‘h1′ selector to which ever css selector you want impacted by the new font. And of course be sure to change the font name where it says ‘My Favorite Font’ to the name of the font you just generated.

Quick Tip: To find the correct name of the font, just open up the font file that was generated by Cufón and you will find it right at the top to the right of where it says “Font Family”. Be sure to use the exact name you see within quotes.

You’re done!

That’s it. You should now see the custom font show up on your site.

Some Helpful Cufón Resources

Here’s some links to sites I have found helpful when working with Cufón. You will also need to read some of these if you want to add additional fonts and style your fonts, etc.

• The Cufón Wiki
• Styling Cufón
• Some text shadow examples (Look at the code behind the page to see how it’s done.)
• Some helpful examples (This is a plugin, but scroll down to the examples.)
• Jeffrey Way’s screencast

And One Final Quick Tip: Something you’ll most likely experience is a delay when the Cufón font is rendered on the page. So what happens is that for a split second, you see the standard web font, and then the custom font is displayed. This can be a little annoying and unprofessional, so here’s a great solution I discovered through one of the links above. Simply add this line to your custom.css file. Replace ‘h1′ which whatever css selector you’re using:

.cufon-loading h1 { visibility: hidden !important; }

Be sure to leave a comment below about your experience with this and if you have other good information to share!

Tagged as: Cufon, Custom Fonts, thesis tips, web design