Show the £ sign and other currency symbols in Storefront Themes that use cufon

This is quite specifically for Storefront Themes several of which use cufon fonts. In particular this post steps you through making the changes in the Instant theme, but it could be a useful guide to achieving the same thing with other Storefront themes. It may be of use to anyone with a theme using cufon.

Cufon is a javascript font replacement technique to allow the use of other more fonts beyond the standard browser sets. For more information on cufon fonts and techniques see these sites.
About and how it works at the wiki https://github.com/sorccu/cufon/wiki/about
To make a font http://cufon.shoqolate.com/generate/
Some practical code to implement cufon http://www.lateralcode.com/text-replacement-with-cufon/

The problem.

In the Storefront Themes Instant theme cufon font replacement is used for all of the heading tags, h1 to h6. When using grid view for your products page the price is part of a group of h2 elements. The cufon font used, Museo, does not contain the £ sign and probably some other currency symbols.

You could just remove the cufon fonts all together. That would mean all headings would lose that stylish font. You could just remove it from all h2 headings by removing that cufon replacement line from the header.php file. This would mean all widget headings etc would not be the desired font. So what we need to do is remove it just from the price h2 in the product grid, yet you can not remove it by class.

The solution

Ok I am rather pleased with myself for figuring this out. You can specify html tags to exclude not classes. So time to edit some PHP. First step lets add some code to header.php which is in your theme folder. Show no fear and jump in even if you have never done it before. New to PHP editing? see the Tools note at the end of this post.
First make a backup copy of this file somewhere!

At approximately line 29 you will find the cufon replacement code. Change the h2 which looks like all of the other h tags to be like the highlighted section below.

<script type="text/javascript">
	Cufon.replace('.cufon'); // Set font class
	Cufon.replace('h1'); // Set font class	
	Cufon.replace('h2', {
  ignore: {
    small: true
  }
});
	Cufon.replace('h3'); // Set font class
	Cufon.replace('h4'); // Set font class
	Cufon.replace('h5'); // Set font class
	Cufon.replace('h6'); // Set font class
	Cufon.replace('#main-nav a', { hover: true }); // Set font class
	Cufon.replace('.name a', { hover: true }); // Set font class
</script>

Now that says add cufon to all h2 tags but not those that are also the small tag. Why small, no real reason except that it is not often used so probably will not be a problem anywhere else. Now lets add that small tag to our wpsc-products_page.php file which is also in the theme folder. This is the page that displays the product grid or list. Add the opening and closing small tags <small></small> as shown in the highlighted line below.
First make a backup copy of this file somewhere!

				<div class="producttext">
						<h2 class="prodtitles">
							<?php if(get_option('hide_name_link') == 1) : ?>
								<span><?php echo wpsc_the_product_title(); ?></span>
							<?php else: ?> 
								<a class="wpsc_product_title" href="<?php echo wpsc_the_product_permalink(); ?>"><?php echo wpsc_the_product_title(); ?></a>
							<?php endif; ?>
							<?php if ( get_option('storefront_gridview') == "true" ) {echo "<br /><div class='gridview-price'><small> junk". wpsc_the_product_price(get_option('wpsc_hide_decimals'))."</small></div>";} ?>				
						</h2>
						<?php							
							do_action('wpsc_product_before_description', wpsc_the_product_id(), $wpsc_query->product);
							do_action('wpsc_product_addons', wpsc_the_product_id());
						?>

Now we have a cufon free price with £ sign in the product grid. Pretty cool, but wait, did you check it out. It is you guessed it small, very small! No problem lets just make a special class that only effects the small tags with the class .gridview-price just in case the small tag is used elsewhere. See the Custom CSS note below if you do not know what to do with this.

.gridview-price small{
font-size:18px;
}

Thats it, you should have a regular font showing the £ sign and matching the original size that the cufon Museo font was displayed at. You can of course specify any size and any particular regular font using font-family if you wish.