Making custom fonts has never been this easy.
DrafType is a premium, interactive, and user-friendly web application designed to help creators, designers, and developers craft custom typography directly in their browser. With support for image tracing, freehand canvas drawing, and retro pixel-grid drafting, DrafType provides a comprehensive suite of tools to create and export professional .otf and .ttf font files instantly.
The application is deployed on Cloudflare Pages and is publicly accessible here: 👉 draftype.woyo.workers.dev
- 🚀 Key Features
- 🛠️ System Architecture
- 💻 Local Development
- 📁 Tech Stack
- 📜 Commands Reference
- 📄 License
DrafType supports three unique creative modes designed to fit different design styles:
- Image Tracing: Upload images/photos of letters, adjust threshold settings, and trace them into clean vector glyph paths.
- SVG Import: Drag-and-drop raw SVG files to convert vector drawings directly into character paths.
- Font Editor: Upload an existing
.ttfor.otffont file to modify its characters and re-export.
- Brush & Pen Tools: Draw vector paths using smooth brush strokes or precise vector pen anchor points.
- Smoothness Controls: Automatically neatens and smooths rough mouse or touchscreen paths.
- Path Customization: Toggle between Calligraphy or Pointed pen styles, adjust brush size, and utilize reference backgrounds.
- Touchscreen-Optimized: Fully optimized drawing canvas on iOS, Android, and tablet devices with pointer capture safety.
- Grid Editor: Easily design retro pixel fonts by placing blocks on an interactive grid.
- Mobile-Friendly Drag Drawing: Draw and erase across grid blocks smoothly using drag gestures on mobile or tablet touchscreens.
- Grid Scaling: Customize grid dimensions and block offsets.
- Autofill & Clear: Powerful pixel manipulations for drawing symmetry.
- Kerning Pairs Editor: Manually adjust the spacing between specific character combinations (e.g., "AV", "LT").
- Live Preview Specimen: Test your font in a real-time text playground with sentence templates, line heights, and size controls.
- Auto-Save & Draft Backups: Integrated IndexedDB support saves your work local to the browser so you never lose your progress.
DrafType is built as a React-based client-side application running on Next.js/Vite (powered by the Vinext/Cloudflare ecosystem).
graph TD
A[User Interface] --> B[Mode Selector]
B --> C[TypeTapToe: Tracing & Import]
B --> D[FingerType: Freehand Draw Canvas]
B --> E[BrickType: Pixel Grid]
C & D & E --> F[Glyph Manager]
F --> G[IndexedDB Local Auto-Save]
F --> H[Kerning & Path Neatener]
F --> I[Export Engine: opentype.js]
I --> J[Downloaded OTF/TTF Font]
- Node.js
>= 22.13.0 npmorpnpmpackage manager
-
Clone the Repository:
git clone https://github.com/keliksa30/draftype.git cd draftype -
Install Dependencies:
npm install # or pnpm install -
Start the Local Dev Server:
npm run dev # or pnpm devOpen
http://localhost:3000or the terminal-indicated port to run the app. -
Production Build:
npm run build
- Frontend Core: React 19, TypeScript, Next.js, HTML5 Canvas
- Styling: Vanilla CSS (including custom premium dark mode themes)
- Local Storage: IndexedDB (via custom hooks)
- Font Generation:
opentype.js(for parsing, manipulating, and writing OTF/TTF binaries) - Hosting/Backend Platform: Cloudflare Pages with Vinext full-stack bindings
npm run dev- Starts the development server.npm run build- Validates the Vinext production build.npm test- Runs test suites.npm run db:generate- Generates Drizzle migrations for DB schemas if Cloudflare D1 integration is enabled.
This project is licensed under the MIT License - see the LICENSE file for details.
Crafted with 🖤 by keliksa30.