Recently I’ve been on a small campaign to try to make my personal website more… personal. Little ways to make it obvious it’s mine and personal, not just another piece of the boring corporate dystopia that is most of the web these days. I don’t quite want to fully regress to the Geocities era and fill the screen with animated under construction GIFs, but I do want to capture some of that vibe.
I’d added some bits and pieces along those lines: floating images in articles now look like they’re stuck to the page with sellotape, related post links have a wavy border that animates when you hover over them, and so on. Next, I wanted to change the heading fonts from a monospace font to something cursive, to resemble handwriting. Less terminal output, more handwritten letter. I couldn’t find one I liked, though. So why not make my own? It can’t be that hard, right?
Failing to do it myself
I set out to try to make the font myself using open source tools. After doing a bit of research, it seemed like the general approach was to create vectors of each character and then import them into a font editor. That seems to mean either Adobe Illustrator and FontLab (if you have too much money) or Inkscape and FontForge (if you like open source). I fall firmly into the latter category, so I grabbed my graphics tablet and opened Inkscape.
I wrote out my first three letters: capital A, B and C. Saved them in Inkscape, and attempted to import them into FontForge. Then I remembered one crucial thing that had slipped my mind: I absolutely loathe using FontForge. It’s a bit like when you open an old version of GIMP and get a bunch of weird looking windows floating all over the place; it feels like you’re fighting against the tool to do even the most basic operations. The difference is I have cause to edit images a lot more than I edit fonts, and GIMP has actually significantly improved their UI over the years.
Here are the rough steps I went through with FontForge:
Launch Font Forge. It shows a weird bit of art in one window, and an open file dialog in another. I don’t want to open a file, so I close that dialog. The program exits. Relaunch Font Forge, and realise that within the “Open Font” dialog is a “New” button. Click it. Get to the standard font-editing UI. Right-click on the “A” looking for a way to import an SVG. Don’t see one. Click around a bit, exploring the menus. Everything feels a bit off. You can’t open one menu then hover over the next to see its content, like basically every UI toolkit in existence. I think FontForge has eschewed QT and GTK in favour of doing things itself. Find the “Import” option in the File menu. Hope it’s for a single glyph not the whole font. A file picker opens. Again it’s all a bit off from normal desktop conventions. Try to resize it, and just get blank gray space at the bottom. Type the absolute path I want to go to in the text field. Get a dialog saying “Not a bdf file /home/chris/etc”. Press OK. Get a dialog saying “Could not find a bitmap font in”. Press OK. Press Ctrl+L to see if that lets me enter a path. Click everything in the dialog to try to find a way to enter a path. Get annoyed. Give up. Click through folder-by-folder to get to where I want to be. Get to the folder and don’t see any files. Change the format to “SVG”. Double-click the newly-visible SVG file. Get a dialog saying “You must select a glyph before you can import an image into it”. Press OK. The import dialog goes away, having not imported. Select the glyph in the main tool area, then repeat the File→Import dance. It’s actually there now! Open the glyph in the editor and see it’s a complete mess of Bézier curves. I can’t click what I want without accidentally moving a handle for an adjacent curve. Rage-quit.
I’m sure FontForge is less anger inducing once you’re used to it. And you definitely could use it to build a font like this if you had much more patience than me. I’d had enough of death-by-a-thousand-paper-cuts though.
I briefly tried Inkscape’s built-in support for making an SVG font. It annoyed me a lot less, but it’s fiddly: it seemed like each font had to be a single path, so you had to convert the glyphs to paths, then merge them correctly. If you merge them incorrectly then the wrong bits of your letters end up filled (like the inside of the ‘B’). Path manipulation is getting towards the limit of my knowledge of vector editing, and it took a bit of trial and error for each letter that had more than a single stroke. I didn’t fancy doing that for every letter.
I’m usually a big advocate of open source, but this was one of those painful times where it feels like it just falls short. Clunky, painful UI and processes where commercial tools just let you get on with your work.
... continue reading