Creating a cufon font

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 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.

You said it was super easy, for you maybe, how do I make one?!

You need to know what character sets are. The basic Character set for English is known as Latin.
Then you have…
Latin extended supplement, or often just called Latin Extended
Latin Extended A
Latin Extended B
Latin Extended C
Latin Extended D
Greek Extended
Cyrillic Supplement
Cyrillic Extended-A
Cyrillic Extended-B

These are the ones that cover most European languages. Remember not all fonts contain all characters.

First make sure you have your font on your local computer, you need to have the font to make a cufon version. There are lots of font sites where you can download fonts, many are free. Check to see if it has the characters you want. Different operating systems have different ways of viewing all of the characters in a font. Or just try typing the characters into a word processing program in that font. Do they work? If they do you are good to go. If not search the web, see if you can find a version with a more complete character set.

Making the font

The next step is to make the cufon font. Go to the cufon font site.

On that page Section 1. “Select the font you’d like to use”

You will be asked to upload your font and make various choices.
First select the regular font and upload from your computer. Then decide if you need bold, italic etc versions and upload if you do. If you will not, leave them out and keep the file smaller.
Ignore the text box. Confirm you have a licence by checking the box, you do right!

Section 2. “Include the following glyphs (if available)”

Select what Character sets you need to include. Do not include All, it will be a really big file which your users will not appreciate.
You can select Basic Latin to get all of the basic Uppercase, Lowercase, Numerals, Punctuation. Then you need to choose what extended character sets you want. How do you know? Check out these references click a set to see what characters it includes. Check only the sets you need. If it is really only a couple of extra characters you need you can just select basic Latin and then enter those extra characters in the “add also these single characters ” box

Section 3. “Security”

Add your domain to limit the file for use there.

Section 4. “Performance and file size”

Leave it at defaults.

Section 5. “Customization (for 3rd-party scripts only)”

Leave it default which is…
Cufon.registerFont

Section 6. “Terms”

Check the box to Acknowledge.

Now you have done all of that click the “Let’s do this!” button. There will be a short wait and then a file will download to your computer. It will have the file extension .js. This is your cufon font file. I told you it was easy.

Add it to your theme. This is a a whole different topic. Some stuff to get you started can be found here which is specific to Storefronts Gridport Theme. It does give you a general idea though and includes links to more information. If you want to test your new font using a lot of the special characters at once you can copy and paste whole character sets, drop them into a post and see if the characters render. You may need to wrap them in a heading tag to test in a Storefront theme as they only use cufon in headings.