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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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....
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.
<style>
@font-face {
font-family: MrPoopybutthole;
src: url(path_to/mrpoopybutthole.ttf);
}
</style>
<p style="font-family: MrPoopybutthole;">MrPoopybutthole</p>
MrPoopybutthole