Cufon, a god send!

So for any of you developers out there who have been living under a rock like (like myself until a few months ago) there is this incredible JavaScript plug-in caller Cufon. Cufon allows you to render any font you want on your web page without having to convert everything to images and thus worry about SEO issues. The best part is super that it is easy to install! Really it is a simple five step install, which goes a little something like this:

1. Download Cufon file (cufon-yui.js)
2. Call to Cufon file in your document Head
3. Walk through the Cufon text converter and acquire the resulting JavaScript file (click here to do so)
4. Link to font script (attained from the Cufon website) in your document head and you are pretty much ready to rock and roll
5. Use the Cufon.replace() function to determine which sections of your content will have the desired custom font, and there you have it!
*Note: I usually use jQuery with Cufon to add the extra ease of the jQuery selectors, though you do not have to…

Your final code would may look something like this:

<html>
        <head>

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Frutiger_LT_Std_300.font.js"></script>
  
<script type="text/javascript">
       
  Cufon.replace('body');
    
</script>
...

Basically Cufon creates SVG’s out of your text based off of the font file that you upload to the Cufon website. What is really great about it too is that you can limit the usability of the font script to one URL, thus mitigating the concerns of supplying the public with a rights managed font. If you want more information on Cufon, I recommend checking out their wiki at http://github.com/sorccu/cufon/wiki/about. It is also worth mentioning that they suggest sticking a script tag into the bottom of your html for IE6 loading issues. That code goes right before the close body tag and looks like this:

<script type="text/javascript">Cufon.now(); </script>

Try it out, it is really amazing!

Tags: , ,

This entry was posted on Tuesday, August 31st, 2010 at 8:09 pm and is filed under Web Development, What's Hot. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply

You must be logged in to post a comment. If you do not have an account, contact me and I will be happy to set one up for you :)