Node editing in Font Creator

Finally i've beaten the odds and actually managed to write another blog entry. Initially I was going to write a two part entry, the first on how to create your own font type, and the second on how to use SIFr to use your new font on the web.

However after a bit of research it turns out that creating your own font is actually pretty straightforward.Despite the remedial sounding name http://www.myfirstfont.com/ actually covers the subject pretty well. Then on the subject of SIFr I remember hearing about a few alternatives that use slightly different technologies. So instead I am going to give a few tips on font creation and then in part 2 compare SIFr with some of its alternatives to see which best suits my needs.

If you just want the font you can download it here

Font Creation

I have had a few positive comments about the hand drawn font that I use in my secondary header and tag line. The only downside of this is that I have to draw the text, ink it in, then scan the resultant image each time I want to use it. So my proposed solution is to turn it into a font. A quick search on the internet brings up http://www.myfirstfont.com which steps you through a pretty simple tutorial on how to create the font. To summarise their tutorial you have to carry out the following steps.

1. Print out the 'template character set', draw each of your characters and then scan it in. This is the time consuming part, but you do have the ability to alter your characters on a node by node basis later on, so dont be too fussy about little details. The only suggestion I have here is to print out the character set in A3, as its quite tricky to keep the right scale at A4, you can then just scan it in two halfs. I took the executive decision to do lowercase only which probably halves the time taken for this task.

2. For the next step you will need to download and install Font Creator, it doesn't come free but the trial did suffice for what I am doing. Next we load our scanned character set into some image editing software (I opt for photoshop), its then just a case of copying each character from photoshop into font creator. The full tutorial will talk you through the import settings, if you do use an A3 size template you will have to half their recommended size multiplier. Once in font creator the images are parsed into a vector based format so you can alter them node by node. You can also adjust the leading and kerning, this is how I get my letters to sit up against each other with the outlines overlapping slightly.

3. Thats pretty much it, click save and copy the font into your font directory. I was pleasantly surprised and at how easy this was. To see what the world thinks about my lovely new font, I have uploaded it to the following sites.

• 1001fonts.com
• dafont.com
• www.urbanfonts.com

Hopefully this may also help to create a bit of traffic for my fledgling blog, I will keep you updated.

Image created with Font

Original hand drawn image

Finally the comparison above shows the difference between the scanned version and the manually created version (notice I forgot to create the ampersand oops!). The handrawn version obviously has a little more character but for speed i'm pretty happy with the results