Adding effects to your "Cufón" custom fonts
As I discovered in my previous article about Cufón: "Embeding custom fonts - Is it easy?" it is easy to use custom fonts. A collegue of mine asked me if it is possibel to add a shadow to your fonts.I did not know, perhaps because I had not gone into depth when researching the features of Cufón, anyway - I discovered that it is possibel to add shadow to your Cufón fonts!. Here I show you how.
Updated the cufon-yui.js is now version 1.09i to work in MSIE9
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
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::
I do seem to have problems with this - try visiting: Cufón gradient example
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
