Incorporate Cufón in WordPress
Every once in a while comes a project where using a font other than verdana, arial, trebuchet or tahoma would be nice. I recently finished a website for Tod Maffin where, Rob, the designer chose Sansa Condensed as the font of choice for headings. I could have created images for all of the page headings, but I wanted to give Tod the ability to update them if he chose to and more importantly, I also wanted to use the same font for the headings of blog posts. After reading about the alternatives, I decided to give cufón a try and was quite surprised to discover how easy it is.
Here are the steps required to integrate cufón in your wordPress site:
Step 1 – Get cufón
Visit the cufón website and download the YUI-compressed version of cufón. Save this js file in a js folder in your wordPress theme.
Step 2 – Generate your font file
Follow the steps on the Cufón website and add the generated js file to your js folder in your wordPress theme. You’ll be required to upload your font files and thus you need to have purchased them as well as verified that your fonts are legal to use in font embedding. Upload your js folder in your wordPress theme via FTP.
Step 3 – Add the code to your wordPress template
To use cufón, simply add the following lines of code to your header.php file.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/your_cufon_generated_font_file.js"></script>
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
</script>
These few lines of code will convert all of your h1 and h2 into my selected font. That’s it.
Nice tutorial!
If you need easily implement Cufon into your WordPress themes I wrote a plugin All-In-One Cufon
http://www.sramekdesign.com/wordpress/plugins/all-in-one-cufon/
Thanks for the plugin Tom. I’m sure it will make things much easier.
Thanks! This is awesome.
[...] Incorporate Cufón in WordPress [...]
[...] Incorporate Cufón in WordPress [...]
[...] Incorporate Cufón in WordPress [...]
Hello:
Great simple tutorial. The H1,H2,H3 tags work well, but do you know why, however, when I add:
Cufon.replace(‘#navigation’);
…The font looks good, but the drop down becomes glitchy and part of the background image is lost??
Thank-you!!!
[...] Incorporate Cufón in WordPress [...]
You could also enqueue it:
wp_enqueue_script( ‘cufon’, get_bloginfo(‘template_directory’).’/includes/js/cufon-yui.js’, array( ‘jquery’ ) );
Devin, thanks for the tip. I’ve always been scared to go in the function.php file, but I’m starting to dig in there a lot more…
I have been trying to cufón to work for a while now. This post made it clear and now it’s working. Thank you!
Any thoughts on the best way to make links hover?
[...] 104. Incorporate Cufon in WordPress [...]
[...] 104. Incorporate Cufon in WordPress [...]
[...] 104. Incorporate Cufon in WordPress [...]