UPDATE: a new, improved version of this post is available here: https://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…
Thanks for this, very very useful.. in fact I used it fully and it works like a charm.
David,
I couldn’t get WP-Cufon to work either. Your code did the trick. Thanks.
I looked over your site, and it seems you use Thematic a lot. I’m just learning to make WP templates. Is Thematic the way to go, or should I try to build them from scratch? I like the fact it’s free–unlike J. Tadlock’s Hybrid, which charges for documentation–and the fact it’s by Automattic, which seems to be the corporation behind WP. I come from Joomla, and know plenty of PHP/MySQL/JS, it’s CSS?HTML I’m not that confident with.
Hi John,
Thanks for your comment and questions.
I do <3 Thematic. It's a great template upon which to build child themes – if you're not familiar with child theming, I highly recommend that route as the way to go – it lets you achieve thorough themes by applying 'differences' to existing themes, rather than coding everything from scratch. Thematic introduces some great hooks, filters and especially dynamic body and post classes that I find a real boon for agile development.
To really get the most from WordPress theming/child theming, you'll need to invest in some CSS learning – most of what I do is CSS with a few PHP functions and a little jQuery thrown in (and the XHTML is important I guess too). Use Firebug and Web Developer and you'll soon get your head round it 🙂
Anyway, hope that's helpful, feel free to shout if you need any pointers 🙂
Kind Rgds,
Dave
Dave,
thanks for a prompt reply. I like the dynamic classes too. Since you offfered, I have a couple of questions.
By default, the layout is 960px width. Can this be safely changed, especially increased? Also, while playing with it, I needed line-height set to 1.5, and there are many places where by default it’s 100%, so I wound up with
body {line-height:1.5 !important;}
Is that a reasonable exception to the rule to use !important sparingly?
PS: feel free to merge this with my previous. the css should have been,
body, body * {line-height:1.5 !important;}
Hi John,
Interesting questions.
Width can be very happily changed – no probs at all. Nearly all the sites at http://www.divydovy.com/category/portfolio are Thematic child themes – you’ll see there’s a real mix and that almost anything is possible.
With the CSS – you shouldn’t need to use !important. If you are child-theming, you just need to include the same declarations you want to overwrite in your own style.css file (child theme styles overwrite template theme styles, as long as they are as specific). My advice is to check out thematic/library/styles/typography.css – search that for line-height and copy those specific declarations into your own stylesheet. In fact, at the bottom of that stylesheet, Ian shows you exactly how to overwrite his defaults.
Hope that helps…
David