WordPress Intermediate: How to spice up your Blog with a Custom Font

If you are bored with the standard fonts in WordPress or want to stand out from the crowd with a unique, decorative font, you will find that there is no way to achieve this in the default installation.

Fortunately, there is a free plugin for WordPress that will enable you to import a custom font and make it available for use within your design. The plugin is called WP-Cufon. If you’re a beginner to WordPress, you might want to hire a professional to do the following steps for you, as they are experienced with choosing the right fonts and altering the code. They’ll require you to provide access to your WordPress Dashboard in order for them to make the changes.

But if you want to do it yourself, the easiest way to install WP-Cufon is from within your WordPress Dashboard. From the Plugins menu, select Add New and then type in WP-Cufon in the search box. This will bring it up in the results list. Select Install This Plugin and WordPress will upload and install it for you. All you need do is activate it.

Having installed WP-Cufon, you have the ability to import custom fonts into your installation and make them available for use. You will find the WP-cufon settings link under the Appearance menu on your Dashboard.

WP-Cufon searches for fonts in a directory called fonts in your wp-content / plugins directory. As the fonts directory does not exist, you need to create it using either your Control Panel File Manager or an FTP client. Many people recommend Filezilla as one of the best and most user-friendly FTP clients.

Having created the directory, locate the font you want to install and save it to your desktop on your PC. To be recognised by Cufon, the file must be converted to JavaScript format and end with the .js extension. From within the settings of WP-Cufon you will see a link to a generator you can use to convert your file into a Cufon compatible format. Once you have the font file in a compatible format you can upload it to the fonts directory you created earlier. WP-Cufon will recognise, activate and make the font available for use.

You then need to tell the plugin how you want to use the font. For example, you may want to use the font in all of your headings and sub-headings. To do this you need to generate and enter some code in the box provided in Cufon settings. This sounds complicated but in fact, is quite simple if you follow these steps:

  1. The first part of the code is an instruction to Cufon: Cufon.set
  2. The next bit tells Cufon the font you want to use for example Lauren Script: (‘fontFamily’, ‘LaurenScript’). (note the format and the period after the close bracket)
  3. Lastly, tell Cufon which elements of your text you want to use the font with. For headings and sub-headings the instruction would look like this: replace(‘h1’)(‘h2’)(‘h3’); (note the format and the placement of a semi-colon after the close brackets).
  4. Putting all three elements of the code together will look like this: Cufon.set(‘fontFamily’, ‘LaurenScript’).replace(‘h1’)(‘h2’)(‘h3’).

Once you have told WP-Cufon how you want to use the custom font, it will convert your text. In this example, we have asked for headings and sub-headings with h1, h2 or h3 tags to be converted to Lauren Script. When compiling a new page in the WordPress Editor, using the Format menu to designate text as h1, h2 or h3, will now result in your headings being produced in your new custom font.

Using this guide, you can now add that extra bit of flair to your WordPress design that will raise it above the competition, and get you noticed. You will find other examples of code on the WP-Cufon page in your installation to get your creative juices flowing.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.