How-to embed custom fonts in your web pages?

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.j

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!

Typeface.js

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 :P

Hope this tutorial helps!