divydovy

UPDATE: a new, improved version of this post is available here: http://www.divydovy.com/2011/07/cufon-for-thematic-with-no-plugins-improved/

I like Cufón. As long as the page loads and the JavaScript executes quickly, it's a really slick solution to using any font you want (and have a license for) on your website. I haven't really used it for body text, but I used it on the Brandwatch site for headers, and I'm currently using it for another site (to be added to the portfolio soon).

Both times I've used it, I've initially relied on plugins: WP-Cufon and All-In-One Cufon, as they've seemed the only viable options. However, I've never been able to make All-In-One Cufon work, and WP-Cufon seems really unreliable. Often it would detect my font in the /fonts/ folder, but would not then add the font as a JavaScript call to the DOM. Obviously, without that, the Cufon didn't work.

I'm still using Thematic/child themes for most of my WordPress development and I realised by looking at what the plugins did to the DOM that it wouldn't be hard to do manually. So, in the end I decided just to use my child theme's functions.php file to add the necessary JavaScript. Turns out it's not that hard. Here it is:

// Cufon
	//Load Header JS files and stylings
	function load_cufon_js() {?>
	    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/cufon-yui.js"></script> //Loads the main Cufon JS file
	    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/vegur.font.js"></script> //Loads the font JS file
		<script type="text/javascript"> //Various arbitrary text replacement statements
			Cufon('h1#blog-title a', { hover: { color:'red' } });
			Cufon.replace('h1', { fontFamily: 'Vegur' });
			Cufon.replace('h2', { fontFamily: 'Vegur' });
		</script>
	<?php }
	add_action('wp_head','load_cufon_js'); //add the function to the head

	//Load Footer function call
	function load_cufon_call_js() {?>
	    <script type="text/javascript"> Cufon.now(); </script> //This shortens the conversion delay in IE
	<?php }
	add_action('thematic_after','load_cufon_call_js'); //Add it just before the body ends

Remember that any hover statements need to come FIRST, as described here.

Just copy and paste all that into your child theme's functions.php, then add the JS files to the right folder in your child theme.This worked straight away for me and seems simple and lightweight. No reliance on plugins that'll need to be updated (even when you can get them to work)!

If this helps, leave me a comment. It'll encourage me to post more juicy Thematic functions...