Useful Resources for Web Designers and Developers

Advertise

here through BuySellAds

Cufonize Your Pages – How to add Cufon to your Web Design

October 13, 2009 on General, Tutorials

I’m a big fan of Woothemes. It seems that each time they come out with a theme – they push the boundaries of web design. Take a look at their latest creation: Therapy – I can’t help but fall in love with the fine background gradients, smooth and seamless transparencies and nice rounded edges. But what I really like about Therapy is it’s amazing typography. I said to myself: “that’s excellent utilization of sIFR”. So I right clicked on a post title, expecting to see the “About Macromedia Flash” entry – but didn’t see it. So I asked my confused self: “if it’s not sIFR, then what is converting all this dynamic text?”

seethedemo Cufonize Your Pages   How to add Cufon to your Web Design

I inspect element in Firebug – then I see span class “cufon” everywhere.

cufon 1 Cufonize Your Pages   How to add Cufon to your Web Design

So What in the world is Cufon?

Cufon is defined as “fast text replacement with canvas and VML”. It also claims to be a worthy alternative to sIFR – which is, to those who are not familiar – stands for Scalable Inman Flash Replacement. sIFR is the technology used by web designers to replace dynamic text with non-web safe fonts. Although sIFR has done an okay job with text replacement – it has proven to be quite tricky to set up. I’ve used sIFR in a few projects in the past and do admit that it is not the easiest thing to get going. On top of that – sIFR seems a bit buggy, as well as slows down page loads. These are serious consequences to consider for the price of using a unique font for your pages.

So I went ahead and tried Cufon. To my amazement, the following steps is all that it takes to fully “Cufonize” your web pages. *Forgive the use of the term “cufonize” – it may sound funny, but after you try these steps, you too will “cufonize” your pages.

Step 1: Get Cufon

The first thing you need is to download the core javascript file which is responsible for the rendering of your custom font inside your HTML. Head on to http://cufon.shoqolate.com/generate/ and right click the “Download” tab – choose “Save Link As…” Save cufon-yui.js into a local directory in your machine.

cufon 2 Cufonize Your Pages   How to add Cufon to your Web Design

Step 2: Generate your Font

On the same page at http://cufon.shoqolate.com/generate/ – click on the “Regular typeface” field – and browse to your desired font in your local machine.

cufon 3 Cufonize Your Pages   How to add Cufon to your Web Design

The rest of the upload fields are optional. I left all of them default for the sake of making this tutorial short. Just make sure – you are using a font that is legit to use, check off the EULAs and the Terms of Agreement. Click on the “Let’s Do This” Button at the very end of that page.

This should generate a custom font javascript code for you – depending on your font choice. In my case, I picked something very un-extraordinary: Gigi.TTF – which produced a file named Gigi_400.font.js.

Go ahead and save this file in the same directory where you saved the core Cufon-yui.js file and we’re ready to build your page:

cufon 4 Cufonize Your Pages   How to add Cufon to your Web Design

Step 3: Cufonize your Page

All you really need to do from this point is to link to these javascript files in the head section of your HTML. Also make sure that cufon-yui.js is called before the font.js file:

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript"  src="Gigi_400.font.js"></script>

To begin the replacement process – create a custom script like below:

<script type="text/javascript">  
    Cufon.replace('h3, p');
</script>

The above script is telling the cufon to replace all H3 and P tags to our custom font.

cufon 5 Cufonize Your Pages   How to add Cufon to your Web Design

Note that if you want to target specific elements in your page the same way you assign CSS classes and Ids, you have to use a framework such as jQuery that’ll let you do such a thing. To download jQuery, go to http://docs.jquery.com/Downloading_jQuery. Make sure you link to this file BEFORE the core cufon-yui.js in your header.

With the jQuery library in place, now you can select more specific elements in your page (hashtags for IDs and periods for classes). See example code below:

<script type="text/javascript">  
    Cufon.replace('h3#convert-me, p#convert-me-too');
</script>

The above code will Cufonize only the h3 tags with the id of “convert-me”, and p tags with the id of “convert-me-too”.

cufon 6 Cufonize Your Pages   How to add Cufon to your Web Design

Conclusion:

That’s basically it! That’s all it takes for you to use any font you like in your web pages. What I like best about Cufon is that it’s quick and it works. You will also find that general CSS properties such as color, size and positioning still applies on the transformed font. To find out more about the specifics of Cufon styling – see http://wiki.github.com/sorccu/cufon/styling.

Much respect to the people who created Cufon. I’m sure this marks a new trend in web typography. To the folks at Woothemes: keep pushing the boundaries – your work is pure inspiration to web artists everywhere.

seethedemo Cufonize Your Pages   How to add Cufon to your Web Design

Who’s Using Cufon?

The following list of websites are already using Cufon text replacement in their pages:

Healthy Valdosta

healthyvaldosta Cufonize Your Pages   How to add Cufon to your Web Design

Press75

press75 Cufonize Your Pages   How to add Cufon to your Web Design

International Rugby Academy

intlrugby Cufonize Your Pages   How to add Cufon to your Web Design

Zen Desk

zenddesk Cufonize Your Pages   How to add Cufon to your Web Design

Rock Beats Paper

rockbeatspaper Cufonize Your Pages   How to add Cufon to your Web Design

Shopify

shopify Cufonize Your Pages   How to add Cufon to your Web Design

  • http://www.neoweb.co.uk Jaco

    This is a great tool, but I seem to have an issue on BadBoy Testing where it seems the replacement is interrupted and as such the script cant complete the test…anyone had a similar issue?

  • Pierrot

    This is nice tool. Congratulation. But I have an issue because I need to have 3 different font on the same page

    In fact, it the same font but with different style (bold, italic, normal)

    In the above exemple, we have this:

    Cufon.replace(‘h3, p’);

    But how can I do if is italic and is bold?

    Thank a lot

    • Pierrot

      Oups, my avove html code, has been remove :o)
      Here is my js :

      js/cufon/The_Sans_Bold-_400.font.js
      js/cufon/The_Sans_Bold-_italic_400.font.js
      js/cufon/The_Sans_Light-_400.font.js

      But without the balise :o)

  • Pingback: Which Custom Web Fonts Solution Should You Use? | The Best Senuke VPS()

  • http://boltusa.org/guestbook/index.php web design

    What’s up, just wanted to say, I loved this post. It was inspiring. Keep on posting!

  • Pingback: New js library | Hesk Kam()

  • http://goldpricetoday.ws Gold price

    woa, very nice font. It is useful for my site. Thanks!

  • http://www.urduit.net Asad

    great fonts idea.

  • http://www.sportfc.net/link/172 economy hotels in goa

    Everyone loves what you guys are usually up
    too. Such clever work and reporting! Keep up the great works guys I’ve incorporated you guys to blogroll.

  • http://www.badgebeast.co.uk Liam

    Cant wait to give this a go, thanks for the simple instructions.

  • Emily

    Thank you, I have recently been searching for info about this topic for ages and yours is the best I have found out
    so far. But, what about the conclusion? Are you certain in regards to the source?

  • http://code.google.com/p/font-lawyer Font Lawyer

    Visit Font Lawyer at Google Code and be free and clear of draconian font EULAs!

  • yvanobi

    Hey people, i was wondering if Cufon is really usefull, whats the difference between using like google wefont script except that you can ( probably illegaly ) use copyrighted font on your computer ? its basicly just like a font-family css no ?

  • Rachana

    Thank You

  • Pingback: Exploring Web Typogrophy | deswetzel()

  • sameerr allii

    Thanks for your great information, the contents are quiet interesting.I will be waiting for your next post.Premium web Design.

  • http://instalogic.com/ Instalogic Web Design

    Thanks for the very useful information!

    Calgary Web Developers

  • Pingback: customize your beats()

  • KireKhar

    :D Kose Madare ali khalilifar

  • http://www.credinos.com CREDINOS

    While I guess it’s pretty cool, I’ll just stick with Google Fonts.