Cufón 101

In the past week I’ve delved into Cufon and found that it meets all my design needs. Cufon is an JavaScript font replacement technique. Being able to use any font in a website design does add a certain oomph and the flexibility is quite excellent! I’ve used other font replacement techniques in the past, but have found Cufon is easy to use, quite lightweight and is supported on multiple browsers.

Getting Started

Before you begin down this road, there are a few things that need to get done.

  1. Download the Cufón javascript: http://cufon.shoqolate.com/js/cufon-yui.js. Save it locally, we’ll use it shortly.
  2. Figure out what fonts you are going to use. You’ll need access to the original .otf or .ttf file and also own distribution rights (if not open source). There’s a list of some cool open source fonts below.
  3. Generate and download your Cufón font file: http://cufon.shoqolate.com/generate/. Some notes:
    • Only upload the font typefaces that are going to be used. For example, if your design doesn’t call for italic or bold-italic then don’t upload these. The less you upload the smaller your file – and therefore faster loading!
    • Glyphs: Only select the glyphs you’ll be using. For example, if it unlikely that your title will have numbers then don’t include the numeric glyph. Once again, the less glyphs the smaller your font file.
  4. In your CSS use a font-family that is similar in style and size to the font used by Cufón. This will allow the design to look somewhat similar if Cufón doesn’t render correctly.

Ready to go!

In this example, I’ve used Titilium font for headings and font hyperlink tags in the my navigation.

  1. Include the JavaScript for Cufón and the Cufón font.
    <script type="text/javascript" src="js/cufon-yui.js"></script>
    <script type="text/javascript" src="js/TitilliumMaps.font.js"></script>
  2. The basic HTML
    <h1>Business Solutions</h1>
    <h2>Business Insurance</h2>
  3. Tell cufon to replace the fonts for headings and the href tags in the box-nav div tag
    <script type="text/javascript">
        Cufon.replace('h1, h2, h3, .box-nav li a', { fontFamily: 'TitilliumMaps26L', hover:true });
    </script>
    
    OR
    
    <script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'TitilliumMaps26L' });
    Cufon.replace('h2', { fontFamily: 'TitilliumMaps26L>' });
    etc.
    </script>
  4. To use different fonts for different tags, download the cufon font file for each of the fonts
    <script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'Font family 1' });
    Cufon.replace('h2', { fontFamily: 'Font family 2' });
    etc.
    </script>
  5. Add JavaScript error handling in case there is an error loading
    function handleError() {	return true;}
    window.onerror = handleError;
  6. Note: The font color, size and hover color is controlled via the css classes associated with the HTML element.

Resources

About these ads

9 thoughts on “Cufón 101

  1. mohanarangan says:

    Is that CUFON is used only for HEADER tags… why not for the Classes i use it… Leave a reply for the solution….

    thankz for the above steps…

  2. i tried to use cufon for the last couple of day but firefox & IE8 is not working, surprisingly, in chrome it does work. is there any solution for this?

  3. Great items from you, man. I have bear in mind your stuff previous
    to and you are simply extremely excellent.
    I actually like what you’ve bought right here, certainly like what you’re saying and
    the best way in which you say it. You are making it entertaining and you still take care
    of to stay it sensible. I can not wait to learn much more from you.
    This is actually a great site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s