|Read more about this book|
(For more resources on this subject, see here.)
Looks quite interesting, doesn’t it? Let’s get started!
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.
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:
- 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.
- 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:
- On that screen we only have to follow all the instructions and click on the Let’s do this button:
- 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:
- After downloading the Cufón library, we will download a file called cufon-yui.js.
- We now have all the necessary tools. It’s time to make use of them.
- First place cufon-yui.js and Aldo_600.font.js inside skin/frontend/default/rafael/js.
- Now we need to edit our layout file. Let’s open: app/design/frontend/default/rafael/layout/page.xml.
- Once we have this file opened we are going to look for this piece of code:
- And just below it we are going to add the following:
- 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.
- At the bottom of this file we are going to add the following code: