If you are getting bored of using “Web-safe” fonts like Arial and Verdana for headings and at the same time, lazy to render the text in images, then you should consider dynamic text replacement.
In this short tutorial, I will focus on the 2 most widely used methods : Cufón and Typeface.js.
Step 1:
Visit Cufón website and click the Download button. You will be prompted to download Cufón’s Javascript file - cufon-yui.js
Step 2:
Convert the font-face you intend to use in your web pages using the Cufón Font Generator Tool. Again, you will be prompted to download a Javascript file containing all the font information required by Cufón’s Javascript.
Step 3:
In your <head> tag, include both the Javascript files and declares the element(s) that will be using the custom font. Your code should look something like this..
<script type=”text/javascript” src=”cufon-yui.js”></script>
<script type=”text/javascript” src=”blackjar_400.font.js”></script>
<script type=”text/javascript”>
Cufon.replace(‘h1, h2, h3′);
</script>
That’s all about it. In the above example, <h1>,<h2> and <h3> will be presented in Black Jack font!
Step 1:
Download Typeface.js library from here.
Step 2:
Just like Cufón, convert and download fonts using the tool provided (See above image)
Step 3:
Here is the final step. To make it easier for you, I have include the whole working HTML below:-
<html>
<head><script src=”typeface-0.14.js”></script>
<script src=”blackjack_regular.typeface.js”></script>
</head><body>
<div style=”font-family: Blackjack”>
Knock Some Sense
</div>
</body>
</html>
Though both the methods allow you to have beautiful typography on your website, it is advisable not use to it on all of the text on your page. It will slow down your site 
Hope this tutorial helps!
| 34 |
| 23 |
| 22 |
| 17 |
| 16 |
| 16 |
| 13 |
| 13 |
Yeah man, this tutorial really helps!
nice and easy!
Thanks. This is my tutorial on web design..
Now with this tool, i’ll be able to customize my whole blog! thanks mate
yeah.. but do not use it excessively. maybe for headings
thanks for the guide! =)
You are welcome.. MU fan huh?
can we use it on wordpress?
If you have basic knowledge in programming, yes!
Huh, it took me a while to insert custom fonts to my site. I was manually customizing the plug-in I had so I make it just as I want.
Yeah, use it with WordPress.
But what the hell – now I got custom fonts with nice drop-shadow effects!
Wow! Great Tut! Now I can improve my website and blogs.
If I use it in my headings and footer will it make them too slow? mmmmhh I will check them out.
Thanks again!