Custom typography in Magento

Are you sick and tired of boring, old web-safe fonts? For some time now, there are a couple of really quality solutions for their replacement. I believe Cufón is one of the most popular. This article will help you learn how to implement it in your Magento online store.

Follow these steps (and you might find white rabbit):

1. Choose the font you want to use. Make sure the EULAs of these fonts allow Web Embedding.
2. Go to Cufón website , upload you font, let the Cufón do its magic and download your .font.js file.
3. While you’re there, download cufon-yui.js , you’ll need it too.
4. Place downloaded files in js/cufon/ folder on your server.
5. Open page.xml file of your theme and place this code inside your head section

   1 2	< action method = "addJs" >< script >cufon/cufon-yui.js</ script ></ action > < action method = "addJs" >< script >cufon/YourFontFile.font.js</ script ></ action >

6. Open head.phtml file of your theme and place this code right before the end of it.

   1	< script type = "text/javascript" >Cufon.replace('h1, h2');</ script >

   Notice that this code will replace text inside h1 and h2 tags with custom font. You can target specific classes too if you need it, like this:

   1 2 3

   < script type = "text/javascript" > Cufon.replace(' .product-title, .price '); </ script >

Read more