Adding shadow - using javascript

We start up by adding "standard" Cufón style to the H1:
Cufon.replace('h1.customFont', { fontFamily: 'Calisto MT' });

The quick brown fox jumps over the lazy dog

 
To add shadow you simply extend the call with a parameter like this: textShadow: '#eee -1px -1px, #333 1px 1px':
Cufon.replace('h1.customFont.shadow', {
fontFamily: 'Calisto MT',
textShadow: '#eee -1px -1px, #333 1px 1px'
});

The quick brown fox jumps over the lazy dog

 
Click to change shadow

You can try to change the shadow below by clicking the arrows to the right.
Cufon.replace('h1.customFont.shadow', {
fontFamily: 'Calisto MT',
textShadow: '#555 -1px -1px, #fff 1px 1px'
});

The quick brown fox jumps over the lazy dog

 

Adding gradients - using javascript

You can do other interesting things - like gradient colors! Have a look here::
Cufon.replace('h1.customFont.gradient', {
fontFamily: 'Calisto MT',
color: '-linear-gradient(#999, 0.45=#666, 0.45=#555, #999)'
});

I do seem to have problems with this - try visiting: Cufón gradient example

The quick brown fox jumps over the lazy dog

 

Links