DEV Community

MAYYOUNG
MAYYOUNG

Posted on

Turn your handwriting into an editable TTF font in the browser

Have a page of handwriting, an illustrated alphabet, or sketchbook lettering you want to try as a working web font?

Creating a custom font usually requires climbing a steep learning curve with complex typography software. I wanted to simplify that process. Today, I'm sharing MakeFont, a browser-based font generator that turns your handwriting sheets and letter images into editable font profiles.

What does MakeFont do?

MakeFont brings source images, character review, outline editing, and font export into one browser workflow. Instead of just tracing an image blindly, it turns your supplied lettering into an editable profile where you can compare the source with individual glyphs and refine the result before exporting.

It’s designed specifically for illustrators, typography learners, design hobbyists, and creators experimenting with personal lettering styles.

Key Features

  • 📷 Image-Based Creation: Start with a clear PNG, JPG, or WEBP image (up to 20 MB) of your separated, complete letters.
  • ✨ Automatic Preparation & Tracing: The tool automatically prepares the image, proposes character mappings (OCR-assisted), and traces letterforms into vector outlines.
  • ✍️ Editable Glyphs: You have full control to correct labels, adjust bounds and baselines, erase stray marks, draw repairs, and transform individual outlines.
  • 👀 Visible Character Coverage: MakeFont treats missing and uncertain characters as visible decisions. You can easily see which characters are found, uncertain, or missing so you can decide what to correct or add.
  • 📦 Font Preview & TTF Export: Build your reviewed profile, test words in the live web preview (rendered in WOFF2), and download your custom TTF font file.

How to use it

The workflow is straightforward and happens right in your browser:

  1. Prepare a clear image with separated, complete letters.
  2. Open MakeFont.app and upload your image.
  3. Review the proposed character mappings and traced glyphs in the Font Profile.
  4. Correct labels, bounds, baselines, and outlines as needed.
  5. Sign in to build the font, preview your words, and download the TTF. (If you change a glyph later, just rebuild and download the updated result!)

Try it out

MakeFont operates on a freemium model. You can start the local workflow without an account, but you'll need to sign in to build and download the font.

The Free plan gets you started with 2 lifetime credits at registration and 1 font profile, which includes TTF downloads. (MakeFont currently supports selected Latin, Greek, and Cyrillic character sets).

Try it with your own letters here: https://makefont.app

I would love to hear your feedback, especially on the review step: when turning your lettering into a font, what do you find harder to get right—character mapping or perfecting the shape of each letter? Let me know in the comments!

Top comments (0)