All-In-One Cufon

posted in Plugins  by

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.

Latest version 1.1.1

Download the latest version

Features

  • Easy to use
  • Automatic detection of the uploaded fonts
  • Preview of the uploaded fonts
  • Automatic detection of the fontFamily parameter
  • Option to enable only font you really want to use
  • Code tips

All-In-One Cufon admin panel with code tips, fonts preview and field where you set your font.

TODO

  • Display size of .js file
  • Display one test line with all fonts together

How-to

  • Download plugin from WordPress repository.
  • Unzip and upload it to \wp-content\plugins\. Or you can go to the admin panel:
    • Plugins –> Add New
    • Type “all-in-one cufon” into the search field.
    • Install.
    • First you have to generate JavaScript file of your .otf, .ttf etc. font file. To generate this you have to go the Cufon generator.
      Make sure the EULA of the font permits web embedding.
  • Create a folder called /cufon-fonts/ in the wp-content/plugins/ directory, where you need to upload your generated font .js files.
  • When you’re done, just go the admin panel: Settings–>All-In-One Cufon
  • There you will instantly see fonts that were detected in your \wp-content\plugins\cufon-fonts\ folder.
  • Enable fonts you wish to use.
  • The last step is adding the Cufón code.

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)'
                    });
Cufon can make use of gradients

2. Add shadow to the font:

Cufon.replace('.cufon-shadow', {
                    textShadow: '2px 2px red'
                    });
Cufon can have a shadow, too!

3. Add gradient and shadow to the font:

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

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.

Related Stuff