Cufon: Custom Web Fonts the Easy Way

by johan on 2010/03/07

Inspired by Palm’s use of the Cufón JavaScript API to generate images of custom web fonts I have decided to try it out on my WordPress blog headers. Installation was very easy in four simple steps:

  1. Download the WP-Cufón addon, unzip and copy to wp-content/plugins
  2. Go to http://cufon.shoqolate.com/generate/ and convert a TTF or OTF font to JavaScript
  3. Create the folder wp-content/plugins/fonts and upload the generated font.js file to this location
  4. Activate the WordPress plugin and go to settings, and choose your font name and what it should replace

Works very well with the WP-Thesis theme I use on my blog.

{ 4 comments… read them below or add one }

Jamie M Swanson May 6, 2010 at 04:43

Hi Johan!

I’m trying to make this work with my thesis theme but can’t seem to. I’m wondering if I’m incorrectly replacing my font name in the Cufon replacement code. The file is named Gnuolane_Rg_400.font.js so I’m putting ‘Gnuolane_Rg_400′ in my code, but it’s not working. I tried a few variations with no luck. Did you need to put a hook in Thesis somewhere to get it to work & over-ride the current settings? I’m using the latest version of Thesis. Any suggestions? I appreciate your help – I’m a newbie at all this stuff. Thanks!

johan May 6, 2010 at 13:39

Hello Jamie,

I created three fonts: Myriad_Pro_300.font.js, Myriad_Pro_400.font.js and Myriad_Pro_600.font.js. These three fonts were uploaded to Wordpress and were automatically found by the WP-Cufón plugin.

In the Cufón settings under “Your Cufón replacement-code” I have the following code:
Cufon.replace(‘h1′, { fontFamily: ‘Myriad Pro’, fontWeight: ’400′ });
Cufon.replace(‘h2′, { fontFamily: ‘Myriad Pro’, fontWeight: ’400′ });
Cufon.replace(‘h3′, { fontFamily: ‘Myriad Pro’, fontWeight: ’400′ });
Cufon.replace(‘h4′, { fontFamily: ‘Myriad Pro’, fontWeight: ’400′ });
Cufon.replace(‘.drop_cap’, { fontFamily: ‘Myriad Pro’, fontWeight: ’400′ });
Cufon.replace(‘#logo’, { fontFamily: ‘Myriad Pro’, fontWeight: ’300′ });

That was all I did to Cufón-enable my blog.

I hope it helps!

Jamie M Swanson May 7, 2010 at 03:02

Nope, didn’t work for me, but oh well. I’ll figure something out eventually…Thanks for responding.

Jono July 21, 2010 at 05:02

Nice one man. This works perfectly.

Leave a Comment

Previous post:

Next post: