7 min read


Magento 1.4 Theming Cookbook

Magento 1.4 Theming Cookbook

Over 40 recipes to create a fully functional, feature rich, customized Magento theme

        Read more about this book      

(For more resources on this subject, see here.)

Looks quite interesting, doesn’t it? Let’s get started!


You will find all the necessary code in the code bundle; however, some JavaScript libraries won’t be included. Don’t worry, they are very easy to find and download!

Using Cufón to include any font we like in our theme

This technique, which allows us to use any font we like in our site, is quite common these days, and is very, very useful. Years ago, if we wanted to include some uncommon font in our design, we could only do it by using a substitutive image. Nowadays, we have many options, such as some PHP extensions, @font-face, Flash (sIFR), and, of course, Cufón. And that last option is the one we are about to use.

Getting ready

If you would like to copy the code, instead of writing it, remember you can find all the necessary code in the code bundle in Chapter 5, recipe 1.

How to do it…

Ready to start this first recipe? Let’s go:

  1. First we have to decide which font to use; this is totally up to you. In this example I’m going to use this one: http://www.dafont.com/aldo.font. It’s a free font, and looks very good! Thanks to Sacha Rein. Just download it or find any other font of your liking.
  2. Now we need to use the Cufón generator in order to create the font package. We will go to this URL: http://cufon.shoqolate.com/generate/. There we will be able to see something similar to the following screenshot:

    Magento 1.4 Theming tutorial

  3. On that screen we only have to follow all the instructions and click on the Let’s do this button:

    Magento 1.4 Theming tutorial

  4. This will create a file called Aldo_600.font.js, which will be the one we will be using in this example. But we also need something more, the Cufón library. Download it by clicking the Download button:

    Magento 1.4 Theming tutorial

  5. After downloading the Cufón library, we will download a file called cufon-yui.js.
  6. We now have all the necessary tools. It’s time to make use of them.
  7. First place cufon-yui.js and Aldo_600.font.js inside skin/frontend/default/rafael/js.
  8. Now we need to edit our layout file. Let’s open: app/design/frontend/default/rafael/layout/page.xml.
  9. Once we have this file opened we are going to look for this piece of code:



  10. And just below it we are going to add the following:

    See, we are adding our two JavaScript files. The path is relative to Magento’s root JavaScript folder.

  11. With this done, our theme will load these two JS files. Now we are going to make use of them. Just open app/design/frontend/default/rafael/template/page/2columns-right.phtml.
  12. At the bottom of this file we are going to add the following code:


Please enter your comment!
Please enter your name here