Adding Custom Fonts To Your WordPress Website Is Easy

Adding custom fonts to your website has for a time been very difficult. You get you site looking pretty and then upload it to the server and low and behold it looks great on your PC but looks absolutely terrible on everyone elses. The reason for this is that every one only has a few core fonts in common and if you add non-core fonts to your site those without them cant see them.

Now it has changed it’s much easier to add custom fonts to your webpages with cufon. Cufon is a javascript that replaces default fonts with the font stored in a javascript file and its included with the theme so everyone can see them.

The plugin for wordpress can be found in the wordpress.org/extend achieves called wp-cufon. Just upload the plugin to your plugins folder and create a fonts folder in the plugins folder  wp-content/plugins/fonts. The fonts folder is where you can upload your custom fonts to.

Your fonts will need to be changed into a format recognized by cufon to use. Thankfully there is an online utility that will do that for you. Cufon font utility. Currently only TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts are supported for conversion. Make sure that you use royalty free fonts or that you have the right to use it. The page for the conversion is very self explanatory.

I normally tick the following boxes.

Uppercase Lowercase Numerals Punctuation WordPress punctuation Basic Latin

and add my website address in the security area to limit where the fonts can be used and leave the rest as are and press the Lets do this button.

Save the file and upload it to the wp-content/plugins/fonts folder on your server. Open the plugin settings page on your wordpress installation http://YOURDOMAIN/wp-admin/themes.php?page=wp-cufon.php or go to plugins and in the plugin activation area there is a link beside the plugin to that page.

When using the wp-cufon plugin the font should be showing in the Your Fonts area of the settings page.The font name is usually the first word of the file name but if for some reason it doesn’t work when you implement the replacements below, you can check the name by opening the yourfont.js file that you uploaded to the wp-content/plugins/fonts folder. Just search for something like this near the top or on the first line

cufon.registerFont({“w”:205,”face”:{“font-family”:”Vegur Bold“, …

the bold part here is the font name.

To change the fonts all you need to do now it add code to the Please enter your source for the replacements: text box and save.

A quick cufon example image

In this example I have used the font called ADVENTURE to replace the logo text and all <h2> formatted text. The command

Cufon.replace(‘h2,#header #logo’, { fontFamily: ‘Adventure’ });

could also have been used to group the two pieces together. On the settings page are a number of examples of how to change part or all of your text to certain fonts. You can use firefox firebug plugin to find the id’s or classes of the .css elements to change or look in you themes style.css file.

Source by Collaborate