Cufon – easy and fast text-image replacement solution

Cufon - easy and fast text-image replacement solutionHave you ever wanted to use your own font on your website? but bothered about it being installed on your visitors system? Cufon is the solution for you, it makes possible fast and easy replacement of text with the font of your wish. It is extremely easy to set up and supports nearly all major browsers. And also it is SEO friendly.
Here is a demo of Cufon on my portfolio site, those headings with silver gradients are actually text replaced by Cufon on the fly.

Using Cufon

To use Cufon on your site , first download this js file (http://cufon.shoqolate.com/js/cufon-yui.js) and then generate your own font’s js file by uploading your font file here : http://cufon.shoqolate.com/generate/ . Once you have both the javascript files , include it in the head section of your web page like this :
[code lang=”javascript”]


[/code]
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 :
[code lang=”javascript”]

[/code]
The above lines of code will replace all your h1 elements with images rendered in your font.
You can take a look at a more detailed guide to replacing text with cufon here : http://wiki.github.com/sorccu/cufon/usage

Styling your rendered text

You can also add linear gradients to your text with cufon!, here is how :
[code lang=”javascript”]
Cufon.replace(‘h1′, {
color: ‘-linear-gradient(#000, #777, #777, #000)’
});
[/code]
The above code will cause the text to fade from black (#000) to grey (#777) and then back.For a comprehensive guide to styling using cufon refer to : http://wiki.github.com/sorccu/cufon/styling
So why wait? go ahead and try it out today, i bet its awesome and the easiest text-image replacement solution available right now, much simpler and better that sIFR.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2018 All rights reserved | Powered by WordPress
Back to top
Theme by dynamicguru.com