I wrote my alphabet in a spiral notebook, took one photo in dim light, and got an installable TTF out the other end. My computer now can type in my handwriting. The whole thing is open source (MIT), runs locally, and works as three layers: an npm library, a CLI, and a Claude Code skill on top.
Repo: github.com/danilo-znamerovszkij/draw-your-font
Browser demo: danilo-znamerovszkij.github.io/draw-your-font/
This post is about why I built it and how the pipeline actually works.
Why I built it
I always thought it would be so cool to have a custom font, designed by you. And every time I researched it, the answer was some version of "sure, if you're willing to suffer".
Font editors want you to draw every glyph one by one with a tablet pen, or worse, with your touchpad. The tools that accept a photo of your handwriting are limited, and the main one (Calligraphr) wants $8/month for the full version. A subscription for my own handwriting!
So, how hard could it be to just build it and open source it? Turns out, not that hard. Every piece has been open source for years: sharp for image processing, a JS port of potrace for vectorization, svg2ttf for assembly. Nobody had wired them together into one zero-install package.
On the open-source side the closest thing is builtree/handwrite: Python, and it requires FontForge and potrace installed system-wide. That's a real barrier. Most people who want their handwriting as a font are not going to brew-install a font editor first.
So the gap I aimed at was specific: pure npm, no system dependencies, and tolerant of freeform photos instead of demanding a scanner and a perfectly aligned template. Then I wrapped it in a reusable Claude Code skill that does the heavy lifting: you hand it a photo, it hands you a font.
Make your font
npx skills add danilo-znamerovszkij/draw-your-font
Then drag a photo into Claude Code and say "make my font". That's it. Claude finds your letters in the photo, labels them with vision, builds the font, shows you a preview, and then critiques its own work before you have to.
- Finds and labels your letters in a messy photo, and knows a shadow blob from ink.
- Critiques its own output. "Your g traced badly" comes with the crop and a suggested fix.
- Refines by talking. "Make it rounder", "a bit bolder", "how readable is it?"
The photo goes to the model for labeling only. The geometry never leaves your machine. Node 18+, nothing else.
How it works
Six steps, all deterministic code:
- Adaptive threshold. A global threshold dies on real photos, because a page shadow makes half the image darker than the ink in the other half. Thresholding against the local background is why dim light survives.
- Blob detection. Connected components find every ink region. The dot on an i gets merged with its stem by proximity.
- Labeling. Something has to say "blob 14 is a lowercase g". The skill reads a numbered contact sheet with vision, which is why messy freeform photos work.
- Vectorization. Potrace, the same engine inside FontForge and Inkscape. The AI never draws a single curve.
- Metrics. The step that separates "font" from "ransom note". Every character gets a vertical band in a shared em square, so your g hangs below the line and your o stays smaller than your O.
- Assembly. Outlines plus metrics become TTF, WOFF/WOFF2, and a ready @font-face snippet.
Put it on your website
The TTF is for your laptop. For your website, ask for WOFF2 and you get a web font plus the @font-face snippet.
The headline on the demo page is set in a font I made in minutes, from the exact photo in the demo video: danilo-znamerovszkij.github.io/draw-your-font/
I think this matters more now than it used to. Feeds are full of AI slop. Everything is generated in the same voice and set in the same fonts, page after page, post after post. So a site rendered in your actual handwriting, with the wobble of your real pen in every letter, is a personal touch that's hard to fake. It costs you one photo.
One rough edge
Write freeform and some letters can sit a little higher or lower than they should. If you want a cleaner result, print the built-in template (npx draw-your-font template -o template.pdf) and write in its grid, or just rule a few light pencil lines with an old ruler and write on those. But honestly, freeform works fine. My whole demo is one crooked notebook photo.
The fine print
The skill sits on a plain npm CLI with zero system dependencies, so you can run the whole thing without any AI:
npx draw-your-font make photo.jpg --chars "ABCabc" --name "My Hand"
It's trickier than talking to Claude. You type every character in writing order, and there's no one to catch a bad trace for you. But it's there, and it's fully deterministic. There's also a browser demo that runs the pipeline client-side (potrace compiled to WASM), nothing uploaded.
Dark pen, letters not touching. That's the only real requirement; my own hero photo has spiral binding, a page shadow, and bad light. The font you generate is 100% yours, commercial use included.
If you find it useful, please consider starring the repo so more people can find it. And if you make a font from your own hand, I'd genuinely love to see it.
