One great way to improve the look of your site is to use custom fonts, before we were limited to only a few web-safe fonts. If you wanted to use a fancy font you had to use an image, and the only way search engines would see that text, no matter how important, was if you specified an alt tag. Thankfully,options to replace any text on our site with a custom font we specify.   There are many methods to accomplish this but in this post we are discussing Cufón; which uses javascript to replace the text with whatever font you choose. You can implement this manually or use a plugin.  The plugin I am using on this site is called WP-Cufón and this tutorial is about that plugin.  Another plugin to use Cufon is the All-in-One Cufon.   I have also written a tutorial on using TTF Titles, that method is no longer very efficient or SEO friendly.

This guide is meant for both beginners and advanced users, and many of the steps after the plugin is installed and set up will work with any Cufon installation, as the code to product the effect is the same regardless of how you get the code to your site.  If you are already using cufon and just want to see some fun styles to try then jump to the Advanced Tips section now.

Step 1 : Install and Activate the Plugin

The first step of course, is to download and install the plugin, you can do this manually or by simply searching for WP-Cufón in the ‘add plugins’ page in your wordpress admin. After you install and activate the plugin you can now go to Appearance>Cufón to set it up to replace your text with a custom font. The first message you will see when you go to settings is an instruction “Please create the /fonts/ Directory in /wp-content/plugins/”  You are going to need to access your FTP for this step, this can be done through your host’s c-panel, or using any of the FTP programs available online.

If using filezilla or other similar ftp programs you just navigate to the wp-content>plugins directory and right click and select ‘Create Directory’. Enter ‘fonts’ as the name of the folder and click ‘OK’.

If you are a beginner and need more help with how to install plugins, use ftp, and other basics of wordpress then you should check out Wp101, a series of tutorials in both video and text to help you learn the basics to be able to manage your blog. I also offer blog maintince packages and plugin assistance, just contact me for pricing if you need help.

Step 2 – Pick a Font to Use

Now you need to pick a font to use with your titles. There are a ton of free font’s available, you just need to find one that you like; it should be easy to read and should match your sites design style well. I use a site called DaFont. Once you locate a font you like, simply download and extract the font file to your desktop (if in a zipped folder) so it is easy to find for the next step. I generally download a few different fonts so I can try a few to see how they look, some will not render well in the size you need, and some will not work as well as you thought once you see it on the site.

Step 3 – Generate Cufon Compatible File with Font

Now, in order for the font you downloaded to work with Cufon you have to generate it into a compatible format and then upload that file to your new fonts folder. To do this you visit the free Cufon generator. To get started simply begin by uploading the font file you just downloaded, and if there were multiple versions of the font as some have (bold, italic, bold italic) then you upload those as well in the corresponding file boxes. The only one that is required is the regular version. If you are wanting to use a font you already have on your computer in the fonts folder, you will need to copy and paste the font file to another location in order to upload it to the generator.

Next you should name the new font, this step is optional but will make testing new fonts and organizing the ones you have much easier if the font has a long or difficult filename, this set’s a ‘nickname’ for the font to use when telling Cufon what font to use on your site. Be sure to check the box below confirming that you are legally able to use that font (refer to the information with that checkbox if you need help know inf if it is legal or not- most freely distributed fonts are legal to use.)

Next you will select what characters to include in the file, I usually do Uppercase, Lowercase, Numerals, Punctuation, WordPress Punctuation, and Basic Latin.  Besides those options everything else is optional so you can skip it (or read it and pick and choose) finishing off with checking the bottom box to agree to the terms and hitting the big blue “Lets Do This” button to get your file.

Step 4 – Upload New File to Your Server

Now you have a file produced by the generator, you need to upload this to your new ‘fonts’ folder on your host. Use the same steps you did earlier to make a new folder, only this time we are uploading a new file to that created folder.  Once it is uploaded you can visit the Appearances>Cufon page in admin and you should see the file you uploaded to the folder, if you do not then first refresh the page and if that does not work then try re-uploading it again, taking care that the file is going into the folder named fonts, which should be located in wp-content>plugins>fonts.

Step 5 – Set Up Cufon to Replace Your Text

Click to Enlarge

Finally, we are ready to make it work on our site! This is the fun part. The default entry is Cufon.set(‘fontFamily’, ‘Vegur’).replace(‘h1′)(‘h2′); – if you want to replace all of your H1 and H2 text to the same font, then this is perfect, all you will need to do is change the font name, in this case it is Vegur. Change that to the name of the font you want to try. The name is the nickname you set for the font, it is usually the first word in the font file so you can see it easily. (see screenshot)  Once you save this with the button on the bottom of the page,  all text on your page that is classified with a h1 or h2 tag will now display with the new font.

You do not need to specify colors, sizes, or anything because the plugin will recognize them in the CSS and apply the same attributes to the custom font. Likewise, if you want to change the size, color, etc. of a custom font, simply change the attributes in your themes CSS file.

Advanced Tips

For many of you simply replacing the h1 and h2 tags with your new font will be enough.  But there are some very neat things you can do with Cufón, you can do the following with most cufon plugins as well as on your own without a plugin if you already have cufon on your site. Being able to use more than one font, or changing the outputted font while keeping the text version the same.  Here are some of my favorites.

Use Multiple fonts for various Areas of Your Site

You can easily use two or more custom fonts by simply declaring the font name and then the css labels. In this example I am using a class named ‘multiple’ on this paragraph, and I named it in the code below, telling the javascript to replace anything in the ‘multiple’ class to use the font called junction. You can name as many fonts or classes as you would like by following the guideline below (first set font, then tell it what to replace, repeat)

Cufon.set('fontFamily', 'typo');
Cufon.replace('h1')('h2')('h5');

Cufon.set('fontFamily', 'junction');
Cufon.replace('.multiple');

You can easily find out the css names of various sections of your site (so you can replace only the sidebar titles, not the footer titles for example.) by using either Web Developer or Firebug, see each site for instructions on usage. On my blog, all instances of h2 that are within the sidebar have a name of #blog_sidebar h2, and I would enter this in the spot of the h2 in the code to only change the font of the h2′s in my sidebar, leaving all other text with the h2 tag alone.

Applying CSS Hover Attributes

Often links have a hover attribute, usually involving a change in color. These are defined in your themes CSS file. See below for an example of the CSS code to make all links change color when the user hovers the mouse over them. As long as you have something set in the CSS for hover for the text you want to replace then you can simply add hover:true to the Cufon code so that the replacement text will behave as the CSS calls for.

a { color: #000000; }
a:hover { color: #cccccc; }

Cufon.set('fontFamily', 'museo');
Cufon.replace('h1' , { hover: true });

Adding a Shadow

Cufon.set('fontFamily', 'Typo');
Cufon.replace('.shadowexample', { textShadow: '2px 2px #c0c0c0' });

Displaying with a Gradient

This uses any CSS2 color value, minimum of two colors, can also specify stops using the following syntax; red, 0.2=#fff, 0.8=#23d559, black the stops go from 0 to 1 and you must be sure stops 0 and 1 have a value. In the example of stops above the 0 would be red and the one would be 1. With the two other colors in between.

Cufon.set('fontFamily', 'abugslife');
Cufon.replace('.cufon-gradient', { color: '-linear-gradient(black, grey, purple)' });

Displaying with a Gradient AND a Shadow

Cufon.set('fontFamily', 'Typo');
Cufon.replace('h1')('h3');
Cufon.replace('.shadow-gradient', { color: '-linear-gradient(black, purple)', textShadow: '2px 2px #C0C0C0' }); 

Gradient and Shadow on a Link, with special Hover effects

Hover over the example above to see the hover effect.

Cufon.set('fontFamily', 'Typo');
Cufon.replace('a.linkedshadow-gradient', { color: '-linear-gradient(black, purple)', textShadow: '2px 2px #C0C0C0', hover: { textShadow: '2px 2px #C0C0C0', color: '-linear-gradient(pink, purple)' } });

Hover over the example above to see the hover effect. This is making use of RGBA is RGB with an added alpha channel as it’s 4th argument. The alpha channel is a value between 0 (fully transparent) and 1 (opaque). RGBA is part of CSS3.

Cufon.set('fontFamily', 'Typo');
Cufon.replace('a.translinkedbackground', { color: 'pink', textShadow: '8px 8px rgba(0, 0, 0, 0.3)', hover: { textShadow: '8px 8px rgba(0, 0, 0, 0.3)', color: 'white' } });

For some more style information you can visit the wiki page for Cufon here.  There is a good video is at NetTuts+ that goes step-by-step through how to use Cufon without the use of a plugin, manually, I use this method on static sites I design for clients.

I would love to hear your thoughts in the comments, if you have used Cufon or another solution. If you have any great tips or effects to add feel free!