CUFON Font : All you want to know about CUFON!!

In this post we are going to talk about the CUFON fonts and the 4 tips that every UI developer must know.
Before going into the deep discussion let's start from the basics.

What is CUFON?
As per the documentation of CUFON, cufon aims to become worthy alternative to the SIRF. Let's talk in lay man words, in every website design we aim to achieve the smoothness and sharpness of the fonts on the web browser - what we see on the PSD. But thanks to the browser limitation we are not able to achieve that.

But CUFON overcome this limitation and helps us to get the same smoothness as we are seeing in PSD of fonts and that too without uses of images.

It also work with all fonts - web safe fonts/Wen-Non-safe fonts.

Why we need CUFON?
As we have already talked that aim of every UI developer to replicate the PSD 100% on browser but we always have to compromise with the quality of the fonts. Cufon help us to overcome this and help us to achieve the smoothness of the fonts we are expecting without use of images.

Advantage of CUFON?
1) No-Plugins required - We don't need to load any extra JS file as plugin to support it. Only we need to generate our fonts file on cufon website.
2) Compatibility  - It work on all major browsers and especially it works on IE too.
3) Ease of Use - No and Zero-Configuration required for it , simple to use
4) Fast - It's very fast even for small to large text.

How To use?
Using Cufon is the most simple task to do:
1) Go to website http://cufon.shoqolate.com/generate/ upload your fonts
2) Generate the cufon files.
3) Link them to your webpage
4) Activate them by writing : cufon.replace('h1')

You can read full documentation here to https://github.com/sorccu/cufon/wiki/Usage

Pro Tips to use Cufon

1) Multiple Fonts??
Instead of keeping different file for wach fonts, it's better to use one file and merge all fonts code into that,
It will help you to save HTTPS code and give the performance of your website a boost.

2) How to make the underline hovering effect to work?
Cufon don't support underline text-decoration property, to make it achieve the trick is to use border-bottom instead.

3) Active your hyperlinks (<a>) tags
By default cufon don't activate the hyperlinks . To activate them you have to make the hover property to true.

Links to know more:

http://cufon.shoqolate.com/generate/
http://www.cufonfonts.com/

Happy Coding!!!