Using Cufon Fonts In The Frugal Theme

Cufon fonts are generated javascript fonts which you can use in your WordPress Theme even if these fonts are not deemed as web safe. Which means, if other computers do not carry these font type, they will still be able to see the fonts as it is and not revert back to their default. This is because the fonts that you have chosen to use have been re-generated as javascripts. Frankly, I have tried this many times before using the WordPress cufon plugin on other themes but it never seemed to work. This time however, I went the manual way.

There are many good tutorials on using cufon in the web, but this short one will cater specially for those who are using the Frugal Theme like me. The first part is similar for all WordPress Themes. The second part is made easier for those using the Frugal Theme because of the options available in the Theme.

To recap, if you have read the other tutorials, you have to first download the script from the cufon site. Right click on the download link and use the “Save as..” option to save the file on your desktop.

Next, find the fonts you want to use. Use free fonts to avoid any copyright issues. Download them to your computer, then using the browse function, upload the fonts you want generated. Save the generated javascript fonts again to your desktop. Refer to the linked tutorial if you are in doubt.

You should now have 2 javascript files on your desktop. The “cufon-yui.js” and the “yourfontname.js”

Next using your favorite FTP client login to your server and navigate to your wp-content – themes – Frugal. Open up the Frugal theme folder and create a new directory named “js” Open that folder and upload the 2 files from your desktop to the new directory.

This ends the first part and it applies to all other WordPress Themes. Now comes the second part which applies only to the Frugal Theme. Themes which have the same options can also use this method. The only difference is their CSS selectors might be different.

Go to your Frugal Main Options page. In the ‘Header Script Code’ window, copy and paste in these codes.

<script src="<?php bloginfo('template_directory'); ?>/js/cufon-yui.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/League_Gothic_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#navbar',{textShadow: '-1px -1px 1px #eee', hover: { textShadow: '-1px -1px 1px #eee'}})('h1')('h2')('h3')('h4')('h5')('h6')('span.date')('span.comment-count')('.widget h3.title', {textShadow: '-1px -1px 1px #000'});</script>


The first part calls up the javacripts. In the second line, ‘League_Gothic_400.font.js’ is the name of the font that I am using. You should replace that with the font name that you have generated.

The second part will tell cufon the location where the new fonts will be replaced, In this case, the new font will be used on the navigation bar, all those with the H tags, and the widget titles.

Now as always, bad boy browser, Internet Explorer will have issues with these special things and as always we have to cater for them instead of them catering for us. To let Internet Explorer recognize what we have done we have to tell them we have cufon running in our Theme.

Again in the Frugal main Options page, under the Footer Script Code, paste in this line.

<script type="text/javascript"> Cufon.now(); </script>

With that, you should see all your customized cufon fonts in your Frugal Theme showing in all browsers. Enjoy.