The most stylish WordPress sites use non-standard fonts in their designs. The trouble is that in most cases, the end user won’t have the font installed on their machine which would naturally stop them from being able to see it as the designer intended.
A commonly used method for getting around this problem is a script called Cufon, which renders the font on the server, rather than on the client, so it doesn’t matter whether the end user has the font installed or not – it can still be displayed properly.
And in true WordPress community style, there’s a plugin that makes the whole thing very easy.
So if you want to change out a font or two on your existing theme, just follow these simple steps, and you’ll have a sexier blog in no time at all.
- Find the font that you want to use on your blog. A quick search for ‘free fonts’ on Google will pull up hundreds of excellent resources. Download the .ttf font file.
- Convert the ttf file to a Cufon file at the Cufon Generator. Upload the resultant .font.js file to /wp-content/plugins/fonts/. Create the fonts folder if it doesn’t already exist.
- Install the WP-Cufon plugin on your WordPress site.
- Find the CSS class/ID of the page element(s) that you want to use the font with.
- Go to your WP-Cufon settings page. If you uploaded your font file to the right place, you should see it listed under Your Fonts. Take down the name of the font (which is case-sensitive).
- Use the example below to form your Cufon replacement code. In the example below, I’ve replaced the fonts for CSS classes h1, h2 and h3 with the font nevis_700.
You can be as broad, or restrictive as you want with the fonts, by using CSS to declare IDs for the specific elements that you want to change. You can even use multiple different fonts on the same site.
In order to do this, use the following example, where I replaced h1, h2 and h3 with nevis_700 and .comments and .meta with oldsansblack
Cufon.set('fontFamily', 'nevis_700'); Cufon.replace('h1'); Cufon.replace('h2'); Cufon.replace('h3'); Cufon.set('fontFamily', 'oldsansblack'); Cufon.replace('.comments'); Cufon.replace('.meta');
So have you tried it? Were you impressed with the results? Why don’t you post a link to your revamped theme?