← Lab Notes
August 7, 2026 homelabweb developmentfont generation

Starting: FontForge

This project aims to create an online tool for generating custom fonts, allowing users to draw and export their creations in various image formats.

Overview

This blog post documents the initial setup and progress of a home lab project aimed at creating an online tool for generating custom fonts. The goal is to provide a flexible platform where users can experiment with drawing letters by hand or uploading their own image-based fonts.

Background

The project was initiated based on a need for a simple, web-based font creation tool that could cater to both individual letter drawings and the upload of existing images. The primary requirements were minimal constraints on user input and support for common image formats like PNG, SVG, and JPG.

How It Works

Project Structure

The project uses a straightforward stack with Node.js and Express for the backend and HTML/CSS/JavaScript for the frontend. For font generation, we initially planned to use FontForge via its Python bindings (PyFontForge). However, due to specific requirements, this approach was dropped in favor of a client-side solution.

Setup

  1. Node.js and Express: A basic project structure was set up using Node.js and Express for handling file uploads and serving static content.
  2. HTML/CSS Layout: A simple HTML/CSS layout was created for the main page, including drawing tools.
  3. Drawing Functionality: Basic drawing functionality was implemented in JavaScript to allow users to draw on a canvas.
  4. File Uploads: File upload functionality was added to enable users to import their own images.

Decisions and Implementation

  • Dropped PyFontForge: The project decided against using FontForge for generating real font binaries due to the clarified requirement that only image formats (PNG, SVG, JPG) should be supported. Instead, a pure JavaScript/Node.js app was built with canvas-based glyph editing and client-side export.
  • Client-Side Export: The chosen approach embeds drawn glyphs in an <svg><image> element for SVG export, ensuring compliance with the requirement while avoiding complex vector tracing.
  • Persistence: Glyph edits are saved to localStorage for auto-saving across page reloads. Explicit project persistence is handled through a "Save/Load Project" feature that stores and retrieves named glyph sets on the server.

Open Questions

The initial plan did not fully address several open questions, such as specific features for generating custom fonts or user authentication. These were resolved with reasonable defaults:

  • Character Set: A default set of 67 glyphs (A–Z, a–z, 0–9, plus . , ! ? and space) was chosen.
  • Drawing Tools: Implemented freehand pen, eraser, undo/redo functionality, and clear canvas.
  • Uploads and Persistence: All uploads are handled client-side using FileReader, with persistence managed through localStorage and server storage for named projects.

Testing

The full application (drawing, upload, save, export PNG/SVG/JPG, export-all zip, type tester, project saving/loading) was tested via a scripted Playwright run against the live server. All steps passed without issues.

Results

The project is now fully functional and can be accessed at http://localhost:3000. Users can draw or upload each character's glyph, save it, preview typed text in the Type Tester, export single glyphs or the whole set, and save/load named projects on the server.

Lessons Learned

  • Simplicity Over Complexity: The decision to drop FontForge for a client-side solution simplified the implementation while still meeting the project requirements.
  • Client-Side vs. Server-Side: Handling file uploads and image processing entirely on the client side reduced the complexity of the backend, making development faster and more efficient.
  • User Experience First: Focusing on providing a seamless user experience through features like auto-saving and easy export ensured that the tool was both useful and enjoyable to use.

Next Steps

While the initial version is fully functional, there are several areas for future improvement:

  • Real Font File Generation: If real font-file (.ttf/.otf) export becomes necessary, it will be a distinct feature requiring additional development.
  • True Vector Tracing: Implementing true vector tracing for SVG export could enhance the quality of generated fonts but would add complexity.
  • Shape Drawing Tools: Adding shape-drawing tools (lines/curves) beyond freehand drawing could provide more flexibility to users.
  • User Accounts: Implementing user accounts and project management features will allow users to save their work across multiple sessions.

The next steps in this project will focus on these enhancements while maintaining the core functionality of the current application.

Was this useful?