Webtribe - Web Design & Development

Adding Cufón to Magento

Adding Cufón to Magento is pretty straight forward.  There are a couple steps involved but nothing you can’t handle.

Add some javascript files to your skin directory

1. First step, download the cufón js file from the Cufón site.
2. Generate your font js file from the Cufón site and download it as well.
3. Put both files into your skin directory under the js folder if there is one.

You’ll need to call the Cufon.replace() function before Cufon will do anything.  I create another js file called set-cufon.js.  Add your function calls to this file using something similar to the following:

Cufon.replace('h1,h2,h3');
Cufon.replace('p.cufon');

When you’ve finished adding your function calls, add this file to your skin js folder.

Adding the javascript files to the layout

Open the page.xml file and add the following xml inside the page/html_head block:

<action method="addItem"><type>skin_js</type><name>js/cufon-yui.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/your.font.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/setup-cufon.js</name></action>

That should do it.  I’ve noticed some people add the Cufon.replace function calls to the head.phtml template file.  Either way will work.  Don’t forget to clear the cache!