How to add your own Cufon font to Storefront Gridport and Mylo Themes

Here I am back on the subject of Storefront Themes Gridport theme. Not so much a modification request this time as an addition, or extension. Splitting hairs maybe, you do need to edit some code. Lots of Gridport posts, I think it is quite popular.

The questions.

“can I use another font for the site? How do I make a Cufón font and use it”

What the heck is Cufón?

Cufón consists of two individual parts – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript that renders them on your Web site. Cufón allows web developers to use non standard web fonts on their sites without worrying if the end user has that font on their computer.

You can read more about Cufón and how to implement here if you want to.
How to add Cufón to your Web site.
I really want to know how it’s insides work!

You can make your own Cufón fonts or download some ready made ones.
Make your own Cufón fonts, it is super easy.
Get some already Cufónized fonts here.

First you should consider do you even need one?
Maybe you could just use a standard web font and avoid all of this, what are the standard fonts? Read 16 gorgeous web fonts.

OK I know more than I ever wanted to know about Cufón now! How do I use it in Gridport?

Well I did not say you had to read all of that stuff! Lets just get to the practical stuff then. The instructions below refer to Gridport version 1.0.6 but should remain basically the same in all versions. There are 4 basic steps.

Step 1.
Make your font or download one using the links above.
Step 2.
Upload your new Cufón font to the correct folder which is..
wp-content/themes/storefront-gridport-1.0.6/js
Step 3.
Register the font. For this you will need to do one simple PHP edit. If you have not done this before see the note “Tools” at the bottom of this post.
Locate the theme-js.php file which is in the wp-content/themes/storefront-gridport-1.0.6/includes folder. Make a safe copy somewhere in case you have problems.
Find the code shown below. The example is from version 1.0.6, you should be able to find it easily in any version. In this example it was lines 48 to 51.

	if ( get_option('storefront_type_font' ) =='Museo' ) {
		wp_register_script( 'museo', get_template_directory_uri() . '/js/Museo_700_600.font.js', 'cufon');
        wp_enqueue_script( 'museo' );
		}

Copy that code and paste it right after itself. Now make the following changes.
Edit A.
On the first line of your pasted copy add a name for your Cufón font. This can be anything but the font name or a shorter version would seem logical.
Edit B.
On the second line of your pasted code add the file name of your cufon font. Make sure you have the /js/ folder path before your Cufón font file name, I made that mistake when testing.
Edit C.
On the 3rd and 4th lines of your pasted code register and queue your Cufón font file for loading. The name can be anything as long as the 2 are the same. Again the font name would seem logical, use lowercase. Below is a finished example with a font called Dancing added.

		if ( get_option('storefront_type_font' ) =='Museo' ) {
		wp_register_script( 'museo', get_template_directory_uri() . '/js/Museo_700_600.font.js', 'cufon');
        wp_enqueue_script( 'museo' );
		}
		
		if ( get_option('storefront_type_font' ) =='Dancing' ) {
		wp_register_script( 'dancing', get_template_directory_uri() . '/js/Dancing_Script_400.font.js', 'cufon');
        wp_enqueue_script( 'dancing' );
		}

Step 4.
Now you need to edit one more file to make this font conveniently available in the Storefront Options panel. Locate the theme-options.php file which is in the same folder as the previous file you edited. Add the name of your font exactly as you wrote it in the first line of code you changed above. In the example below I have added my Dancing font. Do not forget the comma and quotation marks. In Version 1.0.6 this is approximately at line 238.

"options" => array("Museo","Melbourne","Champagne","Droid", "Dancing","Default Web"));

That is it. You are done. Now go to the StoreFront/Options Panel/Typography Tab in the WordPress backend. Your Cufón font should be available for selection in the “Select your main font type” drop down list. Select it, click “Save All Changes” and reload your Web site. If you did everything properly you should see your new font.