Using custom fonts on your site
As you can see, the headers for my posts and sidebars use a font that obviously isn’t the standard (boring) Arial, Verdana, or Times New Roman. There are several methods to use any font you wish on your website, including a plugin for WordPress. However, the plugin didn’t work for me, and the other methods were too complicated, so I’ll be sharing with you the method I used this time.
- Download Cufon
Click the download link on the Cufon site and save the file onto your computer. - Choose Your Font
On the Cufon site, you can upload the font you’d like to use on your own website and it will convert the font into a .js file. Click browse, and choose the font you want to use. - Choose Your Options
Under “Include the following glyphs”, don’t select all, as it will make the .js file very big. Choose the ones you need, but for me, I just chose the next 5 options available after “All”. - Convert Your Font
Scroll through the rest of the page, make sure you accept the terms, then click on “Let’s Do This” to convert your font into a .js file. Save this new file where you saved the Cufon file earlier in Step 1. - Upload the .JS Files
Upload both the .JS files to the directory where your blog is located. So if your blog is located in the root directory, upload those 2 files there. If it’s located in a folder called “blog”, upload the files into the blog folder. - Using the Script
In order to call the script, you will need to add the following code before the</body>tag:
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/YOUR_FONT_NAME.font.js"></script> - Which Text to Replace
Now you need to decide which texts you want to replace using this custom font. For me, I replaced all the text in my<h2>headers, so I would need to place the following code just before my</body>as well:
<script type="text/javascript">
Cufon.replace('h2');
</script> - Because IE Sucks
You’ll need to add another code (along with the ones earlier) to make sure the font loading isn’t delayed:
<script type="text/javascript"> Cufon.now(); </script>
That’s it! It might seem like a lot of steps, but each step is really simple and easy to achieve. You can still change the color of the custom fonts via css, it just so happens that I wanted my headers to be black. Now if you only want the text within the sidebar section of your site changed, simply change the Cufon.replace('h2'); to Cufon.replace('#sidebar h2');
To use 2 different custom fonts on your site, simply repeat the above steps with the second font, making you add the code to the footer as well so that BOTH fonts are called. Next, you will need to define which font you want to apply to each element. So you will need to expand the code from Cufon.replace('#sidebar h2'); to:
Cufon.replace('#sidebar h2', {font-family: 'YOUR FONT NAME' });
Tada! Custom fonts for your headers! 
