Hi !
I would like to show you how easy to implement Cufon in your website , its simply let you use any font you like in web pages and The following browsers are supported:

• Internet Explorer 6, 7 and 8
• Mozilla 1.5+
• Safari 3+
• Opera 9.5+
• Google Chrome 1.0+

Download the Demo or View online

How to implement it with three easy steps :

• Get  the YUI-compressed version of cufon, available from the cufon website.
• Generate a font : You may use the font generator at our website or run a copy of your own. If you plan on going for the latter option you’re probably clever enough to figure out how to get it running – the source is available from GitHub.com.
• Replace your wanted  text with simple CSS Selector or You may your favorite  javascript selector for this example am ganna use jQuery
  the Rule is :

Cufon.replace(selector, [options])

Examples :

<script type=”text/javascript”>
//  basic tags
Cufon.replace(’h1′);
Cufon.replace(’h2′);

//  using the jQuery selector engine
Cufon.replace(’p.multi span.one’);
Cufon.replace(’p.multi span.two’);
//  testing the gradient with jQuery selector
Cufon.replace(’p.grad’, {
color: ‘-linear-gradient(#CF2626, #232323)’
});
</script>

One Note about IE : Unfortunately one problem remains with Internet Explorer. In most cases, there is a short but visible delay before the text is replaced. You can avoid this issue by inserting the following snippet right before the closing </body> tag  .

Cufon.now();


so Cufon Now knows now that the DOM is Loaded 100%

Another Note : Cufon till now dont have any support for RTL languages as you might see in the bottom of the demo .

Using multiple fonts

To use multiple fonts you only need to specify which font you want to use and you’re set:

<script type="text/javascript">
 Cufon.replace('h1', { fontFamily: 'Vegur' });
 Cufon.replace('h2', { fontFamily: 'Myriad' });

</script>
<h1>This text will be shown in Vegur.</h1>
<h2>This text will be shown in Myriad.</h2>
</pre>

for more info check out the API page .

[tweetme]