<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Font Creation on RockB</title><link>https://baeseokjae.github.io/tags/font-creation/</link><description>Recent content in Font Creation on RockB</description><image><title>RockB</title><url>https://baeseokjae.github.io/images/og-default.png</url><link>https://baeseokjae.github.io/images/og-default.png</link></image><generator>Hugo</generator><language>en-us</language><lastBuildDate>Tue, 28 Jul 2026 04:06:09 +0000</lastBuildDate><atom:link href="https://baeseokjae.github.io/tags/font-creation/index.xml" rel="self" type="application/rss+xml"/><item><title>Draw Your Font: Turn Handwriting into a Real Font with Claude Code</title><link>https://baeseokjae.github.io/posts/draw-your-font-handwriting-to-font-claude-code-2026/</link><pubDate>Tue, 28 Jul 2026 04:06:09 +0000</pubDate><guid>https://baeseokjae.github.io/posts/draw-your-font-handwriting-to-font-claude-code-2026/</guid><description>Turn your handwriting into a real TTF font using draw-your-font and Claude Code — no design skills, no subscriptions, all local and free.</description><content:encoded><![CDATA[<h2 id="what-is-draw-your-font-and-why-does-it-matter">What Is draw-your-font and Why Does It Matter?</h2>
<p>draw-your-font is an open-source Node CLI tool that turns a photo of your handwriting into a working TTF, WOFF, or WOFF2 font using Claude Code&rsquo;s AI capabilities. Released in July 2026, it reached 410 GitHub stars in its first six days and is completely free — no subscriptions, no uploads, no design experience required. Unlike services like Calligraphr ($8/month) or Fontself ($49 + Adobe CC), draw-your-font runs entirely on your local machine, preserving your privacy while giving you a real, installable font in minutes.</p>
<h2 id="how-it-works--the-tech-stack-behind-the-magic">How It Works — The Tech Stack Behind the Magic</h2>
<p>draw-your-font combines several technologies to transform a simple photo into a functional typeface. The core pipeline works like this:</p>
<ol>
<li>
<p><strong>Claude Code (AI layer)</strong> — Claude&rsquo;s vision capabilities identify and label each letter from your handwriting photo. It also judges output quality and accepts natural-language refinement commands like &ldquo;make the descenders longer&rdquo; or &ldquo;the lowercase g looks wrong.&rdquo;</p>
</li>
<li>
<p><strong>potrace (vectorization engine)</strong> — The same bitmap-to-vector tracing engine used by FontForge and Inkscape converts your scanned letter shapes into clean SVG outlines. This is the same proven technology that powers professional open-source typography tools.</p>
</li>
<li>
<p><strong>Node.js CLI (orchestration)</strong> — A set of commands (<code>template</code>, <code>segment</code>, <code>build</code>, <code>make</code>, <code>preview</code>) guides you through the entire process from template generation to final font export.</p>
</li>
<li>
<p><strong>Metrics calibration</strong> — The tool aligns all letters to a shared em-square, ensuring consistent baseline, x-height, and spacing. This is the step that makes the output feel like a real font rather than a collection of mismatched letter images.</p>
</li>
</ol>
<p>The tool has zero system dependencies beyond Node.js 18 or later. A single <code>npm install</code> pulls in everything you need — no FontForge, ImageMagick, or potrace binary required.</p>
<h2 id="step-by-step-create-your-font-with-claude-code">Step-by-Step: Create Your Font with Claude Code</h2>
<h3 id="install-the-skill">Install the Skill</h3>
<p>Getting started takes less than a minute. Open your terminal and run:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npx skills add danilo-znamerovszkij/draw-your-font
</span></span></code></pre></div><p>This installs the draw-your-font skill into your Claude Code environment. If you prefer to work without Claude Code, you can also install the CLI directly via npm:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npm install -g draw-your-font
</span></span></code></pre></div><p>The tool works on macOS, Linux, and Windows as long as you have Node.js 18 or newer installed.</p>
<h3 id="write-your-alphabet-or-use-the-template">Write Your Alphabet (or Use the Template)</h3>
<p>draw-your-font generates a printable template PDF with boxes for each character. Run:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npx draw-your-font template
</span></span></code></pre></div><p>Print the template and fill each box with your handwriting. Use a dark pen on white paper for best results — gel pens (0.5–0.7mm) or fine-tipped markers work well. Include uppercase letters, lowercase letters, numbers, and common punctuation for a complete font.</p>
<h3 id="take-a-photo-and-let-claude-work">Take a Photo and Let Claude Work</h3>
<p>Take a well-lit, flat photo of your filled template. Then run:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npx draw-your-font segment path/to/photo.jpg
</span></span></code></pre></div><p>Claude Code&rsquo;s vision capability identifies each letter in the photo, labels it with the correct character, and extracts individual letter images. The <code>segment</code> command handles the heavy lifting — it detects the grid structure, isolates each character, and prepares them for vectorization.</p>
<p>Next, build the font:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npx draw-your-font build
</span></span></code></pre></div><p>This runs potrace on each segmented letter, converts the bitmaps to SVG vectors, and assembles them into a properly metrics-calibrated font file. The output is a working TTF font you can install on your system.</p>
<h3 id="iterate-with-natural-language">Iterate with Natural Language</h3>
<p>One of the most powerful features of draw-your-font is the ability to refine your font using natural language. After building, run:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npx draw-your-font make
</span></span></code></pre></div><p>This opens an interactive Claude Code session where you can say things like:</p>
<ul>
<li>&ldquo;Make the letters rounder and softer&rdquo;</li>
<li>&ldquo;The lowercase g looks uneven — fix it&rdquo;</li>
<li>&ldquo;Increase the weight slightly&rdquo;</li>
<li>&ldquo;The spacing between letters is too tight&rdquo;</li>
</ul>
<p>Claude Code evaluates your font, identifies issues, and applies adjustments. It can re-segment specific letters, adjust vector paths, and rebuild the font — all without you touching a design tool.</p>
<h3 id="export-and-install-your-font">Export and Install Your Font</h3>
<p>Once you&rsquo;re happy with the result, export your font:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npx draw-your-font build --formats ttf,woff,woff2 --smooth --weight medium
</span></span></code></pre></div><p>The <code>--smooth</code> flag applies anti-aliasing to vector paths, and <code>--weight</code> lets you choose from light, medium, or bold. You can export to TTF (system installation), WOFF (web use), and WOFF2 (compressed web use) simultaneously.</p>
<p>To preview your font before installing:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npx draw-your-font preview
</span></span></code></pre></div><p>This opens a browser-based preview showing your font rendering sample text at various sizes. On macOS, double-click the TTF file and click &ldquo;Install Font.&rdquo; On Windows, right-click and select &ldquo;Install.&rdquo; On Linux, copy the file to <code>~/.fonts/</code> and run <code>fc-cache -f</code>.</p>
<h2 id="cli-only-mode-no-ai-needed">CLI-Only Mode (No AI Needed)</h2>
<p>If you don&rsquo;t want to use Claude Code, draw-your-font works entirely from the command line. The <code>segment</code> command includes a manual labeling mode where you specify which character each box contains. This is useful for:</p>
<ul>
<li>Users who prefer full manual control over the process</li>
<li>Batch processing multiple handwriting samples</li>
<li>Environments where AI APIs are unavailable</li>
<li>Users who want to script font generation in CI/CD pipelines</li>
</ul>
<p>The CLI-only mode still benefits from potrace vectorization and metrics calibration — you just handle the letter labeling yourself. The output quality is identical to the AI-assisted path.</p>
<h2 id="draw-your-font-vs-calligraphr-vs-fontself--cost-and-feature-comparison">draw-your-font vs. Calligraphr vs. Fontself — Cost and Feature Comparison</h2>
<table>
  <thead>
      <tr>
          <th>Feature</th>
          <th>draw-your-font</th>
          <th>Calligraphr</th>
          <th>Fontself</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><strong>Price</strong></td>
          <td>Free (open source, MIT)</td>
          <td>$8/month</td>
          <td>$49 one-time</td>
      </tr>
      <tr>
          <td><strong>Additional costs</strong></td>
          <td>None</td>
          <td>None</td>
          <td>Requires Adobe CC ($55+/month)</td>
      </tr>
      <tr>
          <td><strong>Processing location</strong></td>
          <td>Local machine</td>
          <td>Cloud servers</td>
          <td>Local (Adobe plugin)</td>
      </tr>
      <tr>
          <td><strong>Privacy</strong></td>
          <td>Full — no uploads</td>
          <td>Handwriting uploaded</td>
          <td>Local (but Adobe telemetry)</td>
      </tr>
      <tr>
          <td><strong>Output formats</strong></td>
          <td>TTF, WOFF, WOFF2</td>
          <td>TTF, OTF, WOFF</td>
          <td>TTF, OTF, color fonts</td>
      </tr>
      <tr>
          <td><strong>OpenType features</strong></td>
          <td>Basic (v1)</td>
          <td>Ligatures, randomization, alternates</td>
          <td>Color fonts, variable fonts</td>
      </tr>
      <tr>
          <td><strong>AI assistance</strong></td>
          <td>Claude Code vision + refinement</td>
          <td>None</td>
          <td>None</td>
      </tr>
      <tr>
          <td><strong>Design tool required</strong></td>
          <td>No</td>
          <td>No</td>
          <td>Adobe Illustrator/Photoshop</td>
      </tr>
      <tr>
          <td><strong>Platform</strong></td>
          <td>macOS, Linux, Windows</td>
          <td>Web browser</td>
          <td>Adobe CC (macOS/Windows)</td>
      </tr>
      <tr>
          <td><strong>Learning curve</strong></td>
          <td>Low (CLI + natural language)</td>
          <td>Low (web UI)</td>
          <td>Medium (Adobe tools)</td>
      </tr>
      <tr>
          <td><strong>License</strong></td>
          <td>MIT (free, modifiable)</td>
          <td>Proprietary</td>
          <td>Proprietary</td>
      </tr>
  </tbody>
</table>
<p>draw-your-font wins on cost, privacy, and AI-assisted workflow. Calligraphr offers more advanced OpenType features like ligatures and randomization, while Fontself supports color and variable fonts — but both come with significant price tags and, in Fontself&rsquo;s case, ecosystem lock-in.</p>
<h2 id="privacy-and-local-first-design">Privacy and Local-First Design</h2>
<p>One of the strongest arguments for draw-your-font is its privacy model. Your handwriting is a biometric identifier — it&rsquo;s as unique as your fingerprint or your signature. When you use a web-based service like Calligraphr, your handwriting sample is uploaded to their servers, processed, and stored. You have no control over what happens to that data after processing.</p>
<p>draw-your-font runs entirely on your local machine. The Claude Code session uses Anthropic&rsquo;s API for AI processing, but only the letter images are sent for vision analysis — and those are individual character crops, not your full handwriting sample. The vectorization, metrics calibration, and font assembly all happen locally.</p>
<p>For users who want zero data to leave their machine, the CLI-only mode eliminates all network calls. Your handwriting never touches the internet.</p>
<h2 id="real-world-use-cases-for-custom-handwriting-fonts">Real-World Use Cases for Custom Handwriting Fonts</h2>
<p><strong>Personal branding and signatures</strong> — Create a font from your own handwriting for email signatures, personal websites, and digital correspondence. It adds a human touch that stock fonts cannot replicate.</p>
<p><strong>Wedding invitations and event materials</strong> — Couples can create custom fonts from their own handwriting for save-the-dates, invitations, place cards, and thank-you notes. The consistent typeface keeps materials cohesive while preserving the personal feel.</p>
<p><strong>Children&rsquo;s handwriting keepsakes</strong> — Turn a child&rsquo;s handwriting into a font before their writing style changes. Use it for birthday cards, storybooks, or family newsletters. It&rsquo;s a digital time capsule of their development.</p>
<p><strong>Indie game UI and assets</strong> — Game developers can create unique fonts for their projects without hiring a type designer. A handwritten font adds personality to dialogue boxes, menus, and in-game signage.</p>
<p><strong>Classroom and educational materials</strong> — Teachers can create fonts from their own handwriting for worksheets, handouts, and classroom materials. Students benefit from reading familiar letterforms.</p>
<p><strong>Accessibility and dyslexia-friendly fonts</strong> — Create a font from your own handwriting that you find most readable. Some users with dyslexia report better reading comprehension with personalized letterforms.</p>
<h2 id="tips-for-best-results--lighting-paper-pen-choice">Tips for Best Results — Lighting, Paper, Pen Choice</h2>
<p>The quality of your input photo directly determines the quality of your output font. Follow these guidelines:</p>
<p><strong>Pen selection</strong> — Use a dark, consistent pen. Gel pens (0.5–0.7mm), fine-liner markers, or fountain pens with dark ink produce the cleanest results. Avoid ballpoint pens that leave uneven ink distribution. Stay away from light colors, glitter, or metallic inks.</p>
<p><strong>Paper quality</strong> — Use smooth, bright white paper (at least 80 gsm). Avoid textured or colored paper that adds noise to the scan. The template PDF is designed for standard A4 or letter-size paper.</p>
<p><strong>Lighting</strong> — Take your photo in bright, even lighting. Natural daylight from a window works well. Avoid direct sunlight that creates harsh shadows. If using artificial light, position two light sources at 45-degree angles to eliminate shadows from your hand.</p>
<p><strong>Photo capture</strong> — Hold your camera parallel to the paper. Use a smartphone with at least 12MP resolution. Ensure the entire template is in frame with no cropping. Avoid wide-angle lenses that distort edges. A flatbed scanner produces the best results if you have one available.</p>
<p><strong>Consistent letterforms</strong> — Write naturally but consistently. Keep the same letter size, slant, and spacing across all boxes. If you make a mistake, reprint the template rather than crossing out and rewriting.</p>
<h2 id="limitations-and-whats-coming-in-v2">Limitations and What&rsquo;s Coming in v2</h2>
<p>draw-your-font v1 is impressive but has limitations worth noting:</p>
<p><strong>No kerning pairs</strong> — The current version does not generate kerning tables, so certain letter combinations (like &ldquo;AV&rdquo; or &ldquo;To&rdquo;) may look unevenly spaced. Kerning is planned for v2.</p>
<p><strong>No ligatures</strong> — Common typographic ligatures like &ldquo;fi&rdquo;, &ldquo;fl&rdquo;, and &ldquo;ff&rdquo; are not supported. The tool treats each character independently.</p>
<p><strong>No randomization</strong> — Professional handwriting fonts often include multiple versions of each letter to simulate natural variation. draw-your-font uses a single glyph per character.</p>
<p><strong>Basic OpenType features</strong> — Advanced OpenType features like contextual alternates, stylistic sets, and swashes are not yet implemented.</p>
<p><strong>Manual grid alignment</strong> — The template uses a fixed grid. If your handwriting naturally slants or varies in size, some letters may be cropped incorrectly during segmentation.</p>
<p>The project&rsquo;s GitHub issues and roadmap indicate that kerning, ligature support, and multi-glyph variants are the top priorities for v2. The open-source nature means the community can contribute these features — and with 410 stars in week one, the community is growing fast.</p>
<h2 id="conclusion--why-this-changes-the-font-game">Conclusion — Why This Changes the Font Game</h2>
<p>draw-your-font democratizes font creation. Before this tool, creating a custom handwriting font meant either paying a subscription ($8/month for Calligraphr), buying expensive software ($49 + Adobe CC for Fontself), or learning complex typography tools. The barrier was high enough that most people never bothered.</p>
<p>Now, anyone with a pen, a phone, and a terminal can create a real, installable font in under 30 minutes — for free. The combination of Claude Code&rsquo;s AI capabilities with open-source vectorization creates a workflow that is both powerful and accessible. You don&rsquo;t need to be a designer, a typographer, or a developer. You just need to write.</p>
<p>The privacy-first, local-only design means your handwriting — your unique biometric signature — never leaves your control. In an era where every creative tool wants your data in the cloud, draw-your-font takes a refreshingly different approach.</p>
<p>With 410 GitHub stars in its first week and an active development roadmap, draw-your-font is not just a novelty. It&rsquo;s the beginning of a new category: AI-assisted, privacy-respecting, open-source font creation. Try it today and see your handwriting become a real font.</p>
<h2 id="faq">FAQ</h2>
<p><strong>Q: Do I need Claude Code subscription to use draw-your-font?</strong>
A: No. Claude Code is used for the AI-assisted workflow (automatic letter labeling and natural-language refinement), but draw-your-font also works in CLI-only mode where you label letters manually. The font building, vectorization, and export work without any AI API calls.</p>
<p><strong>Q: Can I use draw-your-font on Windows?</strong>
A: Yes. draw-your-font works on macOS, Linux, and Windows as long as you have Node.js 18 or newer installed. The CLI commands are identical across all platforms.</p>
<p><strong>Q: What file formats does draw-your-font support?</strong>
A: The tool exports to TTF (TrueType Font), WOFF (Web Open Font Format), and WOFF2 (compressed WOFF). You can export all three simultaneously using the <code>--formats ttf,woff,woff2</code> flag. CSS @font-face declarations are also generated for web use.</p>
<p><strong>Q: How is draw-your-font different from Calligraphr?</strong>
A: draw-your-font is free, open-source, and runs entirely on your local machine. Calligraphr costs $8/month and processes your handwriting on their servers. draw-your-font uses Claude Code for AI-assisted letter labeling and refinement, while Calligraphr offers more advanced OpenType features like ligatures and randomization.</p>
<p><strong>Q: Can I edit my font after creating it?</strong>
A: Yes. draw-your-font generates SVG vector files for each character during the build process. You can edit these SVGs in any vector editing tool (Inkscape, Illustrator, etc.) and rebuild the font. The <code>make</code> command also lets you refine the font using natural language through Claude Code.</p>
]]></content:encoded></item></channel></rss>