Using Cufon in Magento

huge-typograpy-5

Written by Mark Clark - Mon Apr 18, 07:57 pm ET

Cufon is a way (among several other) to add more or less any font as a fully usable font directly on your website – of course including Magento. Here we’ll show you how to do that in just a few steps.

  1. Find your font. A good resource of free fonts is www.dafont.com, however make sure the font you are about to use has an EULA that fits your needs.
  2. Go to the Cufon site and follow the instructions on how to upload your font and get the generated font.js file. Also download the cufon-yui.js script.
  3. Place all the .js files in a new directory in /js/cufon.
  4. Open your template’s page.xml file and add the below code in its head section:
    <action method="addJs"><script>cufon/cufon-yui.js</script></action>
    <action method="addJs"><script>cufon/YourFontFile.font.js</script></action>
  5. Now open your template’s head.phtml file and add the following code at the very end of it:
    <script type="text/javascript">Cufon.replace('h1, h2');</script>

You’re done. Your h1 and h2 tags are now using your custom font.

You can also target spesific CSS classes by adding the following script tag:

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

Related posts:

  1. Add Highslide to Magento
  2. Add Highslide to Magento
  3. Add Highslide to Magento
  • Share:
  • Mark Clark

    Note that Cufon is not perfectly compatible with Prototype but by following the above instructions it will work fine.