Latest From Blogigs - Using Cufon Fonts In The Frugal Theme

Posted: 03 Aug 2010 09:19 PM PDT

0saves

Cufon Fonts For 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.

SUBSCRIBER'S BONUS DOWNLOAD - 5 photoshop action scripts.
Add your opinions and comments for Using Cufon Fonts In The Frugal Theme

Powered By Frugal 0savesSave This theme is now powered by Frugal. After using Thesis for quite sometime now, I feel it is time for some new adventures with WordPress Themes. What better then, than to use the copy of Frugal Theme that I won some time ago. I had plans to use...
Add 3 Column Widgetized Footer For The Frugal Theme 0savesSave The Frugal Theme, despite all it versatility, has certain limits when you really want to do something a little but more special to it. In all fairness, you can already add many things to many different locations using the 4 custom widgets but when it comes to having...
How To Change WordPress Theme Fonts 0savesSave First, there are 2 types of fonts. Serif fonts and SanSerif fonts. Serif fonts are fonts that have those “edges” and san serif fonts are those without. A good example of a serif font is New Times Romans while Verdana is a san serif. Read more on How...
The Frugal Theme Review 0savesSave Finally got a chance to take a good look at the Frugal Theme. For those who have not heard of it, the Frugal Theme is another premium WordPress Theme that sells for $87 Single User and $167 for developers. Single user will naturally mean you can only use...
The Frugal Theme Framework 0savesSave I have been looking at the Frugal Theme from time to time to keep up with it’s development as it seems to be to be quite an awesome WordPress Theme framework. The Frugal Theme, developed by Eric Hamm, started off as a basic free Theme but improved over...