Magento Font Replacement using Cufon

Home / Blog / Magento Font Replacement using Cufon

Cufon is a really great javascript-based font replacement library, which aims to be a sIFR replacement. In an attempt to make it easier for a Magento storefront to take advantage of its functionality, we have written a module that allows you to upload the fonts you’d like to use on your website and easily replace any text or component using a single method.

Once you’ve installed the module (link at the end of this post), you’ll first want to upload the fonts you’d like to use on your site. In your admin panel, navigate to Catalog->Brim Fonts.

Here, you can upload the fonts you’ll be using on your site given a name and the font file.

Now that you’ve created your font, you can replace any text in your templates. Simply use the helper method “replace” as such:

echo Mage::helper('brim_fonts')->replace('.product-name h1', 'Chalkduster')

Given the above code, Cufon will now replace your h1 product name text with the Chalkduster font:

Installation of this module can be a bit tricky, but we’re happy to help out with any installations. You’ll start by installing the Brim/Fonts module into your app/code/local directory.

Next, place the cufon php lib under your root/lib folder. Likewise, generic yasmin online place the cufon js files under root/js.

Once this has been done, you have all the code necessary to enable the module. You’ll want to create a Brim_Fonts.xml file in your app/etc/modules directory just like any other module to make it active.

The only configuration for this module is specifying the location of the fontforge executable. Cufon sits on top of fontforge, so you need to have it installed on your server in order for it generate your fonts from your .ttf files. You can install fontforge from here : http://fontforge.sourceforge.net/. Once this is installed, you need to update your app/code/local/Brim/Fonts/etc/config.xml to know where the location of your fontforge resides. As you can see in the file by default, the location of my fontforge is /usr/local/bin/fontforge.

Again, we’re happy to help with any installations, so let us know if you have any questions.

— EDIT [1/6/11] —

Oguz (see comments section) noticed something I missed and was kind enough to email me. I forgot to include that you’ll need to add the cufon js to any page you’d like to replace fonts. In your layout handle, you can do something like this:

<action method="addJs"><script>cufon.js</script></action>

Thanks Oguz!

Showing 18 comments
  • therealro

    Why dont you put this on magento connect?

    I cant get it to show in the back-end (yes i cleared cache)
    Installed it like above.

    Please help.

    Using Magento 1.4.1.1

  • tmillhouse

    Did you create a Brim_Fonts.xml file and put it in your app/etc/modules ?

    Also, the plan is to eventually put it on connect, but we’re busy at the moment wrapping up projects for the end of the year. Once things calm down, we’ll put it up on connect.

  • therealro

    Ahh i see, good work ­čśë

    Anyway, i made the xml –> Brim_Fonts.xml

    with this in it:

    true
    local

  • therealro

    config
    modules
    Brim_Fonts
    active – true – active
    codePool – local – codePool
    Brim_Fonts
    modules
    config

    you get the idea right? ­čśë

  • tmillhouse

    Hmm … I guess it could have something to do with the magento version. This has only been tested on Enterprise 1.9 (which contains the same core codebase as 1.4).

    Tomorrow morning I throw it in a base magento 1.4.1.1 install and see if there is any differences. If its not showing up in the admin panel, it sounds like an acl issue.

    A couple quick things off the top of my head:

    – Are you logging into the admin panel with an admin user with full rights (by default the admin user that you installed with magento should have all permissions)

    – After you installed the module, did it create the brim_fonts database table? This will at least identify whether or not the module installed and ran the setup scripts.

    – When you are logged into the admin panel, and you hover over the Catalog menu link, you are not seeing “Brim Fonts”. (I know this is a stupid question, but I figured I’d ask anyway)

    Other than the above, I’ll get it installed on a 1.4.1.1 install and check it myself. I’ll let you know tomorrow afternoon.

  • tmillhouse

    My apologies for taking so long to respond to therealro; things have been a bit busy lately.

    I finally got around to installing the module into a 1.4.1.1 base install, and all worked fine. I’m guessing there may be some acl permission issue with the admin user logged in. By default, the module will add a menu item under “Catalog” named “Brim Fonts”. This is defined in the adminhtml.xml file in Brim/Fonts/etc. If the problem continues, I would suggest modifying that file to create the “Brim Fonts” menu item as a top level menu item, which I believe doesn’t require any custom permissions.

  • O─čuz ├çelikdemir

    Hi,
    I did everything which I can see admin section properly. But, when we click the Save button, the script throwing the “Unable to process font” exception. The script was uploaded fonts inside the media/fonts directory. Could you please help me?

  • tmillhouse

    The “Unable to Process Fonts” would be thrown during the event of any kind of exception while converting the font file to js. If you could email me the font file you’re attempting to process (to tim@brimllc.com) and any other stack trace that might be available, then I’ll attempt to replicate this evening and get back to you.

  • O─čuz ├çelikdemir

    Sample Brim_Fonts.xml where reside in app/etc/modules directory :

    true
    local

  • tmillhouse

    O─čuz, now that you’ve got the module working, feel free to post a link to where we can see it in action (OR) let me know if you have any recommendations for the module. We’ll be creating a magento connect version of this in the near future.

  • Web Designer

    This cufon font replacement script is really cool. No more use of images to get that unique look on web pages. The web page will be lighter and SEO friendly.

  • tmillhouse

    Yea, I’m glad you like it. I was introduced to cufon while working on the pearle vision site a couple years back. As you said, its great for SEO, and it really makes it easy to apply fonts throughout your site.

  • O─čuz ├çelikdemir

    Tim,
    I would like to show you the website but still in development phase and just working in our intranet environment.

    I am very happy to met you and everybody should work a developer like you.

  • tmillhouse

    Hi O─čuz, thanks for your comments. I’d love to check out some of your work. You can comment here or shoot me an email with details. Let me know if you have any other questions on your work.

  • Kris Bonanno

    Excellent article and easy to understand explanation. How do I go about getting permission to post part of the article in my upcoming news letter? Giving proper credit to you the author and link to the site would not be a problem.

  • tmillhouse

    You can mention this article, no problem

  • salo

    Thank you for sharing! Works great for 1.4.1.1

  • Gareth Daine

    Hi,

    I’ve setup everything as mentioned above (except for fontforge, as I have no idea how to do this from the latest build) but the menu item does not show under ‘Catalog’. Any ideas?

    Also, can anyone point me in the direction of setting up fontforge please? I don’t have root access. Cheers.

    Gareth

Leave a Comment