Dukeo » Blogging » All-In-One Cufon Plugin: Replace Standard Fonts

All-In-One Cufon Plugin: Replace Standard Fonts

Steven 4 responses Blogging

Every person who already developed a website or a blog faced this frustration at least once: when working on internet-based projects, you can’t use all the fonts which are on your computers because not everyone have the same fonts installed on their computer. And let’s be clear: this sucks!

Let’s say you design a beautiful template in Photoshop or your designer goes a little wild and makes a beautiful design. Well, after doing the markup you end up with a less “magic” website because you had to replace the fonts by default ones.

Subscribe to my exclusive newsletter, and learn how to grow your blog like the pros»

Today I’d like to share with you an AMAZING WordPress plugin that let’s you use any font in your blog design: All-In-One Cufon!

all-in-one Cufon WordPress Plugin

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.

All-In-One Cufon 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 Installation

  1. Download plugin from WordPress repository.
  2. 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.
  3. Create a folder called /cufon-fonts/ in the /wp-content/plugins/ directory, where you need to upload your generated font .js files.
  4. When you’re done, just go the admin panel: Settings–>All-In-One Cufon
  5. There you will instantly see fonts that were detected in your /wp-content/plugins/cufon-fonts/ folder.
  6. Enable fonts you wish to use.
  7. The last step is adding the Cufón code.

Adding Cufón 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');

Add gradient to the font:

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

Add shadow to the font:

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

Add gradient and shadow to the font:

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

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)'
}
});

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)'
}

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; }

You can find much more info on this amazing script on the official Cufón’s pages.

Download All-In-One Cufon Here.

When you're learning how to blog online for money, you need to understand that the very first step is to create a website. If you're interested in starting your own blog, I have written a step-by-step guide that will show you how to start a blog for as little as $3.49 per month (this low price is guaranteed only through my link). You will also receive your own domain name for free ($15 value) by clicking on this link and purchasing at least 12 months of hosting with BlueHost. Keep in mind that if you're learning how to make money blogging, the first thing you need is your own self-hosted website. It will help you look more professional in front of your visitors, clients, companies, and everyone else.

If you enjoyed this article,
Get email updates

Join for Free »

4 Comments

  1. Affiliate Manager

    I didn’t know there was a cufon WP plugin. Awesome! Thanks for the link :)

    1. This is why I’m here ;) I’m glad it helped!

    2. Affiliate Paying

      Me too. Thanks for sharing this.

  2. Cesar

    Looking to spice up some of my sites, and found your blog. Cool! Now i can actually put the fonts i want on my sites. Much obliged!

    Best,
    Cesar