How to use your own fonts on your Website?

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?

Different fonts

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

Customizing the SecurityIf 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.]

5 Comments

Simran July 23, 2009

Hey you solved my problem.. I was searching for this for so many days but I’vs not getting it. Let’s try it

Dinesh July 24, 2009

Thanks for such a nice tip, Check out new fonts on my website

everblogger July 26, 2009

Hmm you are welcome
and Sory for not replying I am making a new theme for wp so I was busy
n once thank you for your comments

everblogger July 26, 2009

@Dinesh

Yaa you used it for banners its soo cool 🙂

inder August 4, 2009

its not working for me plz help! : (