Posted 04/21/2013:
I suppose that the scribbles contained in the graphic on the top of this page invoke a good name for the font: sloppyfont.
In my opinion, I didn’t do so badly for a few minutes work inside of the editor. For starters, all I really needed was something to approximate 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 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):
Now, that’s a little better! Some people know I’m left handed. Can you see evidence in the font? I know the reader’s mind has a question forming. I suppose that question runs along the lines of 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 excuses 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 it, and a quick half hour this morning – taken between loud gulps of coffee – set me along the path I think will work most effortlessly. I’ve started building the font face with an SVG editor. Any SVG editor will do. I just needed to remember to create each glyph on a full page, which 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.
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
- Create a little 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, results in the following snapshot:
A little ugly it is – but it’s not a graphic. The browser has rendered the font made with the SVG editor and fontforge. Success! (of sorts)
Now, this is not a font I would release to the openfonts repository just yet. It has problems that are beyond just plain ugliness. I’ve put small caps in the caps places, and nothing in the small caps places in the font database. So, my capitals render as small case. In addition, the font generator function of fontforge complained heavily as it compiled, and spit out error messages that referred to overlapping glyph pieces and parts.
To be continued …
Musings 