All-In-One Cufon

All-In-One Cufon plugin allows you an easy replacement of standard fonts with beautiful catchy fonts.
This plugin implements Simo Kinnunen’s Cufón script, which aspires to become a worthy alternative to sIFR.

Download

TODO

How-to

Adding Cufon code

Add Cufon code to the Cufon’s code field. Basic code for replacing h2 element looks like this:

Cufon.replace('h2');

For more complex element you can use code like this:

Cufon.replace('#top-menu.menu');

1. Add gradient to the font:

Cufon.replace('.cufon-gradient', {
                	color: '-linear-gradient(red, blue)'
                    });

2. Add shadow to the font:

Cufon.replace('.cufon-shadow', {
                    textShadow: '2px 2px red'
                    });

3. Add gradient and shadow to the font:

Cufon.replace('.cufon-gradient-shadow', {
                	color: '-linear-gradient(blue, yellow)',
                        textShadow: '2px 2px #C0C0C0'
                    });

4. Add gradient and shadow to a link:

Cufon.replace('a.cufon-gradient-shadow-link', {
                	color: '-linear-gradient(#FF9900, #000000)',
                    textShadow: '2px 2px #C0C0C0',
                    hover: {
		textShadow: '2px 2px #C0C0C0',
		color: '-linear-gradient(#99CC00, #000000)'
	}
                    });

Cufon can apply gradient and shadow to links.

5. Set font, gradient and hover.

Cufon.replace('a.cufon-easy', {
                    fontFamily: 'Sketch Rockwell',
                    color: '-linear-gradient(#FF6600, #33CCCC)',
                    hover: {
            		textShadow: '2px 2px red',
            		color: '-linear-gradient(black, white)'
	}

Cufon is easy to set up.

6. Add gradient, shadow and transparency to a shadow:

Cufon.replace('a.cufon-transparent', {
                	color: '-linear-gradient(#FFFFFF, #99CCFF)',
                    textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
                    hover: {
		textShadow: '10px 10px rgba(0, 0, 0, 0.3)',
		color: '-linear-gradient(#FFFFFF, #969696)'
	}
                    });

CSS code

.cufon-transparent { display: block; font-size: 40px; background: url(images/cufon-bg.jpg) repeat; }

Cufon can work with transparency in links.

You can find much more info on this amazing script on the official Cufón’s pages.
They also have active forum, where you can ask all your questions regarding Cufón.

Get Full Access