This tutorial will cover a way of using non proprietary fonts on webpages using the Cufon javascript library.

Right, first of all, pick a nice font you like, in this tutorial I will be using Euphemia although you can choose any other fonts which can be found here. Please remember that Cufon only accepts the following font types:

TrueType (TTF)

OpenType (OTF)

Printer Font Binary (PFB)

PostScript fonts

Once you have chosen a font, download it and upload it to the Cufon website here.

You will need to fill out the relevant sections and do not pick something you will not be using such as Cyrillic Alphabet for example. Picking only what you need will make the javascript smaller.

You will also need to include the Cufon library which can be found here.

Include it in the script like this

<script src="js/cufon-yui.js" type="text/javascript"></script>

Once you have followed these steps, we will now use the Cufon API to load and apply styles to our page. The Cufon API can be located here .

So lets get some script tags open like this..

<script type="text/javascript">
</script>

Once we have done that, we will then need to put in some Cufon javascript. Below is a function called replace which replaces the text and applies styles such as color which changes the text to blue and fontWeight which makes it bold. The selector in the example below is 'h2' tags but you can make it whatever you want it to be as long as it's valid. This means that it will replace all h2 tags to the styles mentioned above.

Cufon.replace('h2', {
color: '#26548B;',
fontWeight : 'bold'
});

So for example, we have some html below that contains h2 and h3 tags.

<h2>This is a </h2>
<h3>Cufon Test</h3>

We can then define some javascript to change these fonts and styles below like this.

This tutorial will cover a way of using non proprietary fonts on webpages using the Cufon javascript library.

Right, first of all, pick a nice font you like, in this tutorial I will be using Euphemia although you can choose any other fonts which can be found here. Please remember that Cufon only accepts the following font types:

TrueType (TTF)

OpenType (OTF)

Printer Font Binary (PFB)

PostScript fonts

Once you have chosen a font, download it and upload it to the Cufon website here.

You will need to fill out the relevant sections and do not pick something you will not be using such as Cyrillic Alphabet for example. Picking only what you need will make the javascript smaller.

You will also need to include the Cufon library which can be found here.

Include it in the script like this

<script src="js/cufon-yui.js" type="text/javascript"></script>

Once you have followed these steps, we will now use the Cufon API to load and apply styles to our page. The Cufon API can be located here .

So lets get some script tags open like this..

<script type="text/javascript">
</script>

Once we have done that, we will then need to put in some Cufon javascript. Below is a function called replace which replaces the text and applies styles such as color which changes the text to blue and fontWeight which makes it bold. The selector in the example below is 'h2' tags but you can make it whatever you want it to be as long as it's valid. This means that it will replace all h2 tags to the styles mentioned above.

Cufon.replace('h2', {
color: '#26548B;',
fontWeight : 'bold'
});

So for example, we have some html below that contains h2 and h3 tags.

<h2>This is a </h2>
<h3>Cufon Test</h3>

We can then define some javascript to change these fonts and styles below like this.