Posted 04/21/2013:
Font making may be an endeavor well suited for those with an artistic nature. I’m not sure, but that could spell doom for today’s project, which is to make a font we can call our own. To start the project, I made scribbles inside of an SVG editor. The header graphic (above) is the result of the scribbling, and it seems to provoke an appropriate name for the font: sloppyfont.
In my opinion, I didn’t do so badly for a few minutes work inside of the SVG editor. All I really needed was something to approximate the fonts. The point of the exercise was to create a font file and then to see it working, ugly or not. Since I can distinguish one letter from the other, I’ll call it good enough for the dry-run prototyping.
I don’t think I did too badly with the “k”, but I left the “e” in terrible shape, admittedly. Seeing that the “m” needed serious remedy, I quickly put together a replacement (three minutes):
Is the new “m” a little better? Some people know I’m left handed. Can you see any supporting evidence in the font? I know that inside of the reader’s mind a question is forming. The gist of that question is this: “How does one make a font?” “Please Tell!” A long time ago I attempted to define my own font. It was fifteen years ago (at least) when I last tried to grow glyphs, and I hope that elapsed time serves as a good enough excuse for the fact I couldn’t recall many details relative to how it’s done. Is fifteen years that long?
There are various ways to do fonts. To narrow the possibilities, I spent a quick half hour this morning – taking in internet articles between loud gulps of coffee – and those nuggets set me onto a path I think will work almost effortlessly. Based on various suggestions, I started building the font face within my SVG editor. Any SVG editor could do the job, but it is best to remember to create glyphs separately, each on a full page. This approach allows for easier manipulation of the details. I used the default (A4) page setting. Most SVG editors are akin to paint programs, making the drawing fairly painless. Curves can be added with the bezier curve tool.
The master plan, concocted with help gleaned during my coffee hour, revealed itself thusly:
- Create a page-sized SVG file for each letter.
- Feed these “enmasse” into the FontForge font creation tool, using the “import via SVG template” import option.
- Click the “generate fonts” menu item.
- Create a truetype font (type selected in step 3).
- Create a little index.html file that embeds the font.
- Look at the font with a web browser.
The index file is as shown below:
<html>
<head>
<title> The Sloppy Font Tester </title>
<style>
@font-face
{
font-family: sloppiestfontinthewest;
src: url('file:///home/g/fonts/sloppiestfontinthewest.ttf');
}
p
{
font-family: sloppiestfontinthewest;
font-size: 18px;
}
</style> </head>
<body>
<p>
HELLO THERE
</p>
</body>
</html>
Firing up the browser, and pointing it to the directory where I stored the index.html file, resulted in the following snapshot:
A little ugly it is – but it’s not a graphic. The browser has rendered the font (sloppiestfontinthewest.ttf) made with the combination of the SVG editor and FontForge application. Success! (of sorts).
Now, this is not a font I would release to the Openfonts repository just yet. It has problems that go beyond just plain ugliness. I’ve put small case letters in the uppercase slots, and nothing in the small case slots within the font database. So, my capitals render as small case. In addition, the font generator function of FontForge complained loudly as it compiled, spitting out error messages that referred to overlapping glyph pieces and parts. Yet, it produced a font file.
To be continued …
Next section: https://ronaldscheckelhoff.wordpress.com/lets-make-a-font-2/
Musings 