How to turn handwriting into a TTF font from scratch

Developer danilo-znamerovszkij has open-sourced a pipeline that converts handwriting photos into TTF fonts using npm, with a Claude Code skill wrapper that automates vision labeling and local build. The deterministic image-processing pipeline uses adaptive thresholding, blob detection, and a JS port of Potrace for vectorization, outputting TTF, WOFF2, and CSS snippets without system-level dependencies.

How to turn handwriting into a TTF font from scratch Custom fonts usually require either a subscription or the patience to draw every single glyph in a complex editor. I wanted a way to go from a messy photo of a notebook to an installable font without paying a monthly fee or installing system-level dependencies like FontForge. For those who want to see the results or check the source, the demo and repo are available here: I've open-sourced a pipeline that handles this entirely via npm. It’s structured as an npm library and a CLI, but the real productivity gain comes from the Claude /en/tags/claude/ Code skill wrapper. My AI workflow for font creation Instead of manually cropping letters, I use the Claude Code skill to automate the vision-to-font pipeline. npx skills add danilo-znamerovszkij/draw-your-font Once the skill is added, you just drop a photo of your handwriting into Claude Code and tell it to "make my font." The agent handles the vision labeling, triggers the local build, and then actually critiques the result—pointing out if a specific character traced poorly before you even notice it. Technical Deep Dive: The Pipeline The process isn't "AI-generated" art; it's deterministic image processing powered by an LLM agent for the labeling phase. Adaptive Thresholding: Unlike global thresholds that fail due to page shadows or dim lighting, this uses local background comparison to isolate ink. Blob Detection: It identifies connected components, merging dots like on an 'i' with their stems based on proximity. Vision Labeling: This is where the agent comes in. It reads a numbered contact sheet of the blobs to identify which is which. Vectorization: It uses a JS port of Potrace. The AI doesn't draw the curves; it just identifies the regions for the vector engine. Metrics Calculation: To avoid the "ransom note" look, it assigns characters to vertical bands in a shared em square, ensuring proper baselines and x-heights. Assembly: Finally, it compiles the outlines and metrics into TTF or WOFF2 formats. Dependencies: Node 18+ Zero system-level installs Privacy: Only the photo is sent for labeling; the actual geometry processing stays local. Output: TTF, WOFF2, and @font-face CSS snippets. For those who want to see the results or check the source, the demo and repo are available here: https://github.com/danilo-znamerovszkij/draw-your-font https://danilo-znamerovszkij.github.io/draw-your-font/ Next Vibe Coding: Building a Personal Blog from Scratch → /en/threads/2667/ All Replies （3） Z This is interesting I think I'm actually going to try and make my own font now 😀 0 M I tried this with a sketchbook once; the kerning was a nightmare to fix manually. 0 J Try using a high-contrast scan; makes the thresholding way cleaner during vectorization. 0