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:
- Download the WP-Cufón addon, unzip and copy to wp-content/plugins
- Go to http://cufon.shoqolate.com/generate/ and convert a TTF or OTF font to JavaScript
- Create the folder wp-content/plugins/fonts and upload the generated font.js file to this location
- 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.
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!
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!
Nope, didn’t work for me, but oh well. I’ll figure something out eventually…Thanks for responding.
Nice one man. This works perfectly.
I followed all you tutorial, buti it does not work at all: the client-side HTML tell me this:
Cufon.set(‘fontFamily’, ‘DIN_400′).replace(‘h1′)(‘h2′);
The website is done with Calypso theme.
Cheers and thanks