Creating a font for a website with open source software (GlyphTracer, FontForge and the Gimp)

I’ve been using all free open source software to make fonts recently. It’s been great fun and quite easy. I’m using the Gimp, GlyphTracer and FontForge. I’m working on Linux but I’m sure you can get these running on Mac or Windows too.

GlyphTracer is an easy-to-use program for creating a font from a bitmap image.

First I create an image of the characters in the font using the Gimp. I’ll use a separate layer for guide lines. I could also use a scanned image (if you don’t have a grahics tablet then I’d suggest you draw the characters on paper and scan them).

Run Gimp and go to File -> New and create a new image. Make it quite wide.

In the Layers window right click on the background layer and create a new transparent layer. The new layer is selected by default.

Now I’ll draw some guide lines. Click on the pencil tool.

Then select a single pixel brush, the finest available.

I click on the page and then hold down shift and control to make it easier to draw perfectly horizontal lines. I draw 4 lines.

Right click on the bottom layer (not the one with the guide lines) in the Layers window.

Select the paintbrush tool and a suitable brush size.

Use “+” and “-” to zoom in and out until you are at an nice size to work at. Start drawing characters!

When you’ve finished one line then click on the guide layer. Press control-A to select everything in the layer, control-C to copy and press control-V to paste. You now have a new set of guidelines. Click on the move tool.

Click the title bar of the image window and press shift and the down arrow until you have a new set of lines.

Right click on the new layer called “Floating selection” and select “anchor layer” to add it to the guide layer.

DON’T FORGET to left click on the background layer to select it before you start drawing characters again!

I’ll include some symbols “!” and quotation marks and to make glyphtracer realise that it’s a whole line I’ll draw a vertical at the side (otherwise I’ll get 2 glyphs for the “!”) and underline the quotes (otherwise I’ll get 4 single quotes instead of 2 double quotes).

GlyphTracer will only work on 1-bit (black and white with no greyscale) images so go to Image -> Mode -> Indexed and select “use black and white (1 bit palette)”.

Uncheck the “eye” visibility checkbox for the guide layer.

Now save the image as a PNG file.

Run glyphtracer and select the name for your font, the image file you just created and an output filename (it will create an SFD file which I will then use FontForge to edit and convert to a standard TTF).

GlyphTracer will pick characters and highlight them as blocks which you can click on. The first group it asks you to pick is lower case characters, starting with “a”. Click on the boxed “a” and it’ll automatically move on to selecting the next character. If you have characters in other groups such as capitals and numbers then select the group from the drop-down list (bottom left).

Here I am picking “D”.

See how the vertical and horizontals have made glytphracer realise the size of characters.

When you’re done then hit the “Generate SFD file” button.

Run FontForge and open the SFD file. You’ll get a window showing the characters in your font.

Double click one and you get a window to edit it (you’ll have to get used to splines though since that’s how the characters are defined).

Select File -> Generate Fonts (or control-shit-G) and create a TTF (TrueType font) file. This can be used to display your font in a website (only works in Firefox, Opera, Safari and Chrome – IE uses EOT files and I’ll show you how to convert in a moment).

I use ttf2eot to convert from TTF to EOT for Internet Explorer compatibility.

At the linux command line you can use:

ttf2eot MyNewFont.ttf > MyNewFont.eot

If you’re using IE to view the test page then you’ll have to recreate the EOT file each time you export the TTF file from FontForge.

I create a webpage in the same directory as the TTF file and put this text in:

<html>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<style>
@font-face {
font-family: “MyNewFont”;
src: url(MyNewFont.ttf) format(“truetype”);
}
</style>
<!–[if IE]>
<style>
@font-face {
font-family: “MyNewFont”;
src: url(“MyNewFont.eot”);
}
</style>
<![endif]–>
</head>
<body style=”font-family: MyNewFont, serif”>
<div style=”font-size: 32pt”>
&ldquo;Hello World!&rdquo;
</div>
</body>
</html>

And hey presto! The page appears using my new font and it’ll work on any browser.

But we’ve still got the underline on the quotes and the capitals and lowercase don’t line up.

First, the quotes. In FontForge use control-alt-[ to go through the glyphs until you find the quotes. Double click to open the edit window.

Double click on the unwanted underline so all the points in it are selected.

Press delete. Do this for both quotes. Generate a TTF font again and refresh your browser.

Now to vertically align the lowercase characters. Double click the “a” and the “A” in FontForge and press control-alt-minus so that you can see the font guide lines.

The “a” is too high. It should rest on the line.

Hold down shift and click all the characters from “a” to “z”.

Right click the one of the selected letters and select Transform.

Select Move and I set the Y value to -340 (I had to play around to find the right value) and OK.

Look at the “a” in the window. It’s moved to about the same level as “A”.

Generate the TTF again and refresh your browser window.

And here’s the end result. You can select and copy the text in the browser, it’s more SEO friendly and far easier to maintain than using images or Flash to get the font you want. Hoorah!

Update:

It also works astonishingly well across different browsers – I’ve tested with Mozilla, Chrome, Safari, Opera and IE5, IE6, IE7, IE8 and IE9. The only bug I’ve seen is with Chrome on Windows which gives a square character for space. This is what some browsers do when trying to display a character which doesn’t exist in the page. Defining character 32 (space in ASCII) would probably fix it.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Comments

  1. An easier way to align the glyphs is to select all nodes with ctrl+a and then just dragging the glyph from a node.

  2. That’s the best way to move all the nodes in one character. In the article I wanted to show how to resize a whole range of characters.

  3. Thank you very much for this tutorial. I used this coupled with a YouTube clip to get the hang of Glyphtracer and Fontforge. This will be a big help for enhancing my new designs with original text. I’ve mentioned this tutorial on my website

    Thanks again! Stephen

  4. Thanks! It was a lot easier than I thought to make a font. Glad you like the tutorial!

Leave a Comment