Custom typography in Magento – Cufón

Featured Image

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
    <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.
    <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:

    <script type="text/javascript">
    Cufon.replace(' .product-title, .price ');
  7. Enjoy your custom typography!!

About Hrvoje Jurisic

Team Leader, Frontend Developer, Designer / Illustrator

Hrvoje is Certified Frontend Magento Developer and creator of Inchooers, your favorite comic.

Read more posts by Hrvoje / Visit Hrvoje's profile


  1. embed problem , the fonts I need for my logo cannot be embedded and much probably they do not have commercial version with this capability.
    I´ve seen a couple of sites that employ .woff , .ttf , .otf fonts , all font files stored at a folder on their server.
    how exactly to do this I do not know.

  2. Disregard my previous message seems to be working great. I had missed some code and now its working.

  3. Hey, I found your article very usefull for cufons I have installed on a magento site, so thanks for that. One question I do have though… so far I have used the cufon for MSGILLS font which is fine, however I now need to add another font along side this ‘Perpetua’, Do you know how I would go about doing this yet using two different fonts at the same time?

    Thanks again

  4. All the major browsers have decided to go their own way with font formats that they choose to support. The following types would need to be stored on the server for use with @font-face.

    Internet Explorer only supports EOT
    Mozilla browsers support OTF and TTF
    Safari and Opera support OTF, TTF and SVG
    Chrome supports TTF and SVG.

    Further, mobile browsers like Safari on the iPad and iPhone require SVG. So the full CSS for using @font-face would look something like the following.

    @font-face {
    font-family: ‘YourFont;
    src: url(‘YourFont.eot);
    src: local(‚ò?’),
    url(‘YourFont.woff’) format(‘woff’),
    url(‘YourFont.ttf’) format(‘truetype’),
    url(‘YourFont.svg#webfont’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

  5. Hi, I use Magento 1.5 and I live in Norway. The cufon can not read Norwegian alphabet like “Æ,Ø”.
    Any suggestion how can I solve this problem?

  6. I found a solution to not working cufon on home page, the problem is


    on header.phtml

    just delete if statement

  7. Hi!

    Our e-commerce partner has restricted our access to the server. We do not have access to the root. I therefore wonder if it is necessary to place the cufon directory in the root /js directory or could I place it in my theme´s js directory?

  8. Its working grt on all the pages except home page, couldn’t figure it out why its not working on the home page. Please help me !

  9. does not work lightbox.
    necessary prototype library, but it is connected.
    In the first reports said that connecting cufonxxx.jc not required, but if not displayed characters

  10. Hello,
    I have completed everything here and the cufon works great on all pages except the home page. I get a protype.js error and cufon undefined?

    any body else have this problem.

  11. its working for me
    but on index page not working on all other pages are working
    please check

  12. @priyanka

    I can’t tell you much from the code you provided since WordPress stripped your HTML tags, but from what I can see you didn’t place cufon script call at the very end of head.phtml file.

    If you read my post and the comments one more time, you will see that I mentioned it more than once.

  13. @Hrvoje – I have added the cufon in page.xml like this:


    skin_csscss/styles-ie.csslt IE 8

    jslib/ds-sleight.jslt IE 7
    skin_jsjs/ie6.jslt IE 7


    and I have included the script at the end of head.phtml.
    [ like this :

    getTitle() ?>
    <meta http-equiv="Content-Type" content="getContentType() ?>” />
    <meta name="description" content="getDescription()) ?>” />
    <meta name="keywords" content="getKeywords()) ?>” />
    <meta name="robots" content="getRobots()) ?>” />
    <link rel="icon" href="getSkinUrl(‘favicon.ico’) ?>” type=”image/x-icon” />
    <link rel="shortcut icon" href="getSkinUrl(‘favicon.ico’) ?>” type=”image/x-icon” />

    var BLANK_URL = 'helper(‘core/js’)->getJsUrl(‘blank.html’) ?>’;
    var BLANK_IMG = ‘helper(‘core/js’)->getJsUrl(‘spacer.gif’) ?>’;

    Cufon.replace(‘h1, h2’);

    Cufon.replace(‘#nav a’,{hover: true}) ;

    getCssJsHtml() ?>
    getChildHtml() ?>
    helper(‘core/js’)->getTranslatorScript() ?>
    getIncludes() ?>

    but still its not working and an error is coming in FF
    “Cufon is not defined
    [Break on this error] Cufon.replace(‘h1, h2’); ”

    Please help…

    Thank you.

  14. lol, its took a while but the whole Magento package is starting to all make sense now, am glad too cos its an awesome piece of software once you get your head around it all lol!

    haha that cartoon hits the nail square on the head haha 😀

  15. All working fine now 🙂

    Couldnt find page.xml (not sure if this is because I am using the latest version of Magento) but put the files in my head.phtml file and works fine!

    Had a minor problem with it not finding the .js files but fixed the paths in head.phtml and Viola!

  16. Disregard I got it..

    The header.phtml info needed to go literally right at the very bottom.


  17. @Hrvoje-
    Thanks a lot for reply!!!
    will follow the things you have mentioned…and let you know.

    Thank you.

  18. priyanka,

    Prototype is a javascript library, similar to jQuery. This tutorial is written for Magento, and since Magento uses Prototype and Scriptacoulus, there’s no need to include an extra javascript library.

    You just have to make sure to include Cufon script at the end of head section – meaning – AFTER you already included prototype, scriptacolous or any other library.

  19. @Hrvoje – can you please guide me which prototypes need to use, I mean I am not aware of prototypes or is there any link where I can get the needful..?
    Please help.

    Thank you.

  20. No need for jQuery. Cufón automatically detects few popular javascript libraries, such as jQuery, Mootools and, what’s important Prototype. Since Magento is using prototype, just make sure you include Prototype before you include Cufon, and all should be working fine.

  21. ohhh okay…
    as per above tutorial, they didn’t mention to add jQuery, but its not working so I added it. but still m facing the tht problem.

  22. Nah I meant generally as there is nothing above to say that you need to call jQuery to make it work?

  23. I guess so…coz I have uploaded jquery.min.js also.
    its not working in Mozilla and IE, and working in Safari, Chrome, Opera.
    Please give me some solution…please.


  24. Hey, I used the same method,
    its working in Chrome, Opera, Safari…but not working in Mozilla Fire Fox and IE7.
    Please help me to solve this issue.

  25. Well, @font-face was planned for some of upcoming articles 🙂

    @font-face is, in my opinion, better solution, BUT, some of the fonts have ugly rendering in some browsers, or on some platforms: in that case, a man could go with cufon.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.