A Simple Cufon tutorial

Cufon text, a way to display different, stylish typos on to your web page/ website. Because, in Web design, also in User Interface design fonts play a major role in beautification of the whole design layout. In the Web 2.0 almost every website is rendered with nice fonts so that the whole website looks beautiful and seductive to its visitor. Hence, in this post we will discuss how to create and use different fonts on web pages using Cufon.

Basically, Cufon Yui generates ‘canvas’ & ‘cufontext’ tag. Where ‘canvas’ tag contains the size and other setting of your text to be displayed and ‘cufontext’ tag contains the text itself. But, as of this simple tutorial we need not to understand this.

Well, we start…

Step 1
Get Cufon YUI file from here. From this link we’ll get the Cufon Yui JS file displayed directly on the browser window. We need this file, so, File > Save As > ‘cufon-yui.js’ (by default); name of the file can be as per our wish, but in this tutorial be keep the default name.

Step 2
Now, its time for our desired font for converting into cufon supporting. For this, we generate cufon font from here. After our font file upload, we will call our font by ‘bauhausmd’. This will be in help while calling the font using ‘font-face’ or ‘font-family’ CSS property.

Remember two most important points:

  • upload only those font files (regular/ italic/ bold) which you’re going to use
  • to support special characters (in european or any other language), specify them in the text box for inclusion.

Regarding language support we can select from the options given under glyphs inclusion section. Continuing, select or enter your options that fits your need and click ‘Let’s do it!‘. This will give us JS file. Download it.

Step 3
On to our HTML file.
Between ‘head’ tag, type the following,

Further,

In Cufon.replace() function, the first parameter is the tag to which our cufon stylized font is applied. This parameter can be one or more tags or/ and class names or/ and ids separated by commas.
For e.g:
Cufon.replace(‘h1, .post-titles, #featured’,…
The second parameter is the name which we gave during cufon text generation of our font(s).

Point to be noted, you can add one or more different stylized cufon font & those can be used for different tags or class names or ids like,

Caution But, the more number of fonts = more loading time.

All right!
Now,

Step 4
Its time to code our tags and texts. Its very simple as

Final step
Add the code just above the closing ‘body’ tag

That’s it! Its complete and we get our successful super styled font on our web page, of our choice.

Web is generous and mostly free, so try using Cufon font JS from Cufonfonts [beta]

Conclusion
Using Cufon will be an advantage in making a web page more readable, eye soothing and attractive. But it is always recommended to stylize only those text which are single word and not a collection of words (a rough example is ‘About Us’). The reason behind the single word is because implementation of Cufon fonts will split words by spaces by this way a single meaningful ‘About Us’ phrase becomes ‘About’ and ‘Us’; has no mean. And if you’re very particular about SEO (Search Engine Optimization) then, you can understand that how search engines are going to read your titles & texts. But for shorter single word usage, Cufon gets a thumbs up! šŸ™‚

Thanks for reading this post and as usual, Iā€™m open to suggestion and critics (positive of course).
Do comment on!

P.S.: Thanks to Harwen for the featured image

Share

Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.

0 thoughts on “A Simple Cufon tutorial

  • Sheeja

    (August 13, 2012 - 1:42 pm)

    good work.. carry on

Leave a Reply

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