Have 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 :
<script src="path/to/cufon-yui.js" type="text/javascript" ></script>
<script src="path/to/generated-font-file.js" type="text/javascript" ></script>
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(‘h1′);
</script>
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 :
Cufon.replace(‘h1′, {
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 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.
