Creating a handwritten TrueType font in Linux

Mar 21, 2018 Art Inkscape Linux

I always wanted to create a font out of my handwritten letters and in this small tutorial I will show you the way I have done it with the help of FontForge, Inkscape and GIMP.

 

Writing some letters

Start by writing the alphabet in lower and upper case plus numerics and some special characters. Good for this job is a graph paper for example. Afterwards you scan the paper and the result should look similar to my one.

Preparing the scan

Let us open the scan in GIMP and use the Brightness and Contrast tool under the menu point Colors. Increase the Contrast until the letters have nice shape. The hadnwritten scan should look similar to my one. Mostly black and white should be visible.

From raster graphics to vector graphics with Inkscape

Copy the whole scan with high contrast from GIMP to your clipboard and open Inkscape. Paste the scan from the clipboard into Inkscape. Open the Trace Bitmap tool under the menu item Path while having the scan object selected.

Use Grays under Multiple scans and set the number of Scans to 2. Press the OK button afterwards and close the tool if it ready.

Preparing the handwritten vector graphic

The result should be an object group with layers. Ungroup the the object group and remove the background layer. Your vector graphic should look similar to my SVG image in Inkscape.

From SVG to a TrueType font with FontForge

First of all start FontForge and press the New button to create a new font.

The following steps have to be repeated for every character in your font. I will show you the steps on the example character A.

Extract character from SVG path

Duplicate the characters layer by pressing Ctrl + D for example. Use the Edit paths by Nodes tool or just pressing F2 while having one characters layer selected. And remove every node and path that is not part of the A character. The following image shows all nodes except the A as selected before deleting them.

Simplify the character path

The next step is to simplify the path of the character. The tool is in the menu under Path and Simplify or just pressing Ctrl + L. The simplified character should look similar to my one afterwards.

Paste the character path to FontForge

Copy the character path in Inkscape and let us open the character A in our empty FontForge font with a double click. Now paste the path of the character into FontForge. The result should similar to my one.

Scale the character in FontForge with stable aspect ratio

Please select the whole path of the character with Ctrl + A and use the Scale the Selection tool of the toolbar. Use the scale tool with the Shift key pressed to keep the aspect ratio of the path. Move the character to the zero line and scale it until the character fits the top boundary.

Afterwards you have to move the right boundary until it fits your character. Depending on your style you should keep more or less space between the boundary and the character. Close the character window and repeat the last steps for every character including the space character.

Export TrueType font with FontForge

Your font should similar to my one afterwards.

Please make sure to save your font as sfd file and after all you can export it as TrueType font via the menu item File and Generate Fonts….

Your handwritten font as web font

There are other font formats, but normally every modern browser understands TrueType fonts. The following small example loads my font and shows you the usage of it.

<span class="token tag"><span class="token punctuation"><</span>style<span class="token punctuation">></span></span><span class="token style language-css">
<span class="token atrule"><span class="token rule">@font-face</span></span> <span class="token punctuation">{</span>
    <span class="token property">font-family</span><span class="token punctuation">:</span> MrPoopybutthole<span class="token punctuation">;</span>
    <span class="token property">src</span><span class="token punctuation">:</span> <span class="token url">url(path_to/mrpoopybutthole.ttf)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token punctuation"></</span>style<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>p<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">font-family</span><span class="token punctuation">:</span> MrPoopybutthole<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>MrPoopybutthole<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">></span></span>