Have you ever thought to use your own fonts in your website but you couldn’t do so because it is a rare font and is installed rarely in all the computers?

So, I have got a quick solution for you and that is called Cufon. It makes possible fast and easy replacement of text with the font of your wish. It is very easy to set up and supports nearly all major browsers. And also it is SEO friendly.

How to use Cufon

To use Cufon is so easy.

First download the JavaScript file (http://cufon.shoqolate.com/js/cufon-yui.js) and generate your own font’s unique JavaScript file here (http://cufon.shoqolate.com/generate/).

Once you have the both JavaScript file, upload them to your webhost and include it in the head section of your web page like this :


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


Don’t forget to change to “path/to” according to your needs.That means the path to the cufon-yui.js and font.js file

Now we are all set up to replace your text , to replace the text with cufon , add the following piece of javascript to your page :

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

The above lines of code will replace all your h3 elements with images rendered by Cufon with the font given by you.
You can take a look at a more detailed guide to replace text with cufon here  (http://wiki.github.com/sorccu/cufon/usage).

Rendering your text (Styling)

You can also add linear gradients to your text with cufon. Here is a sample code


Cufon.replace(‘h2', {
color: ‘-linear-gradient(#000, #777, #777, #000)’
});


The above code will cause the text to fade from black (#000) to grey (#777) and then back for h2 (<h2>) tags. For a detailed guide to styling using cufon refer to : http://wiki.github.com/sorccu/cufon/styling
And the most important feature of this is its so simple than sFIR.

Tips

If you are using some commercial fonts or fonts which you think not to give to your visitor 😀 . use this feature.

Link: Cufon

(Image credits: Stewf)

(Source: Mujtaba)

---

[Editor’s Note: This post is submitted by our guest blogger Kranthi, alias EverBlogger. Kranthi blogs on Devils Workshop about blogging and website optimization tips. You can follow Kranthi on Twitter.

If you, too would like to write for Devils Workshop, please check this. Details about our revenue sharing programs are here.]