Font Maker
Draw the 95 printable ASCII characters (capitals, small letters, digits, punctuation and the space) on a canvas marked with the baseline, x-height, cap height, ascender and descender, set each one's advance width, and download an OpenType .otf file. Letters are vector outlines from the first stroke: a round, square or flat-nib pen with a steadiness setting for a shaky hand, or corner points clicked or typed in font units, with holes for the insides of letters like O and A. What sets it apart is the check after every export: the file is read back with a font parser and compared with your drawing character by character, your browser is asked to load it as a font, and a missing-glyph report lists every character you have not drawn yet. Your work is kept in this browser as you go and a project file carries it anywhere; the font is written on your device and nothing is uploaded.
nothing drawn yet ยท advance 600
drawn 1 of 95: space
missing 94: A to Z, a to z, 0 to 9, ! " # $ % & ' ( ) * + , - . / : ; < = > ? @ [ \ ] ^ _ ` { | } ~
each shows the .notdef box in the preview
space advance 250, no ink
not drawn in this text: T h e q u i c k b r o w n f x j m p s v t l a z y d g .
file MyFont-Regular.otfNothing drawn yet. Pick a character below, then draw it on the stage, or load the example A.
Pen and guides
This glyph
Font
Characters
1 of 95 ready. A dot marks a drawn character; arrow keys move between them.
Pen draws a stroke as you drag; the size is its width in font units, and steadiness smooths the hand. Points places corners and closes them into a shape: Ink adds, Hole reverses the outline so it opens a counter inside one layer of ink. With the keyboard, Tab to the canvas, move the cursor with the arrow keys (Shift for bigger steps), press Enter to place a point or to start and end a stroke, C to close a shape, Backspace to take a point back and Escape to drop it. Ctrl+Z and Ctrl+Shift+Z undo and redo on the canvas.
Common questions
- How do I make my own font?
- Pick a character in the grid under the stage, draw it on the canvas between the guides, and set its advance width, the room it takes up in a line. Repeat for as many of the 95 characters as you like, type a sentence in the preview to see them side by side, then press Export .otf. The file is written in your browser, read back and compared with your drawing, and downloaded, named from your font and style, for example MyFont-Regular.otf.
- What does the exported font file contain?
- An OpenType font with PostScript (CFF) outlines, saved as .otf. It holds a hollow .notdef box, the space, and every character you drew, each with its outline, advance width, standard glyph name and Unicode mapping, plus the font and style name, units per em (1000 or 2048), ascender, descender, cap height and x-height. Project file saves a separate .json that reopens here with Open project so you can keep editing.
- Which characters can I draw?
- The 95 printable ASCII characters: A to Z, a to z, 0 to 9, the 32 punctuation marks and symbols on a US keyboard, and the space, which has a width but no ink. Accented letters and other scripts are not in the set. The report beside the preview lists every character you have not drawn yet, and a dot in the character grid marks the ones you have.
- What happens to characters I have not drawn?
- They are left out of the file, so the font has no mapping for them and they fall back to its .notdef glyph, a hollow box, which is what this tool's preview shows. Many apps and browsers substitute the character from another font instead of showing the box, so the box is not guaranteed everywhere.
- Can I draw with a mouse, a finger, a stylus or the keyboard?
- Yes. The pen follows a mouse, a finger or a stylus: drag to draw a stroke, or tap for a dot. With the keyboard, Tab to the canvas, move the cursor with the arrow keys (10 units a step at 1000 units per em, five times that with Shift, or whole grid squares when Snap points is on) and press Enter to start and end a stroke or to place a corner. You can also type corners as x,y pairs such as 50,0 300,700 550,0 and add them as a shape or a hole.
- What does the steadiness setting do?
- It damps the wobble in a hand-drawn stroke. Set to off, the stroke follows the pointer exactly; each step up to 10 pulls every point further toward the ones before it, and the stroke still ends where you lifted the pen. Every finished stroke is then thinned to fewer points and rounded to whole font units.
- Can I keep working on my font later?
- Yes. The project, with every glyph, width, name and metric, is kept in this browser as you work and comes back when you return, along with your pen settings; Start over clears it. Project file downloads a copy you can open on another device with Open project. If the browser blocks or fills its storage, the page says so, and the project file is then the way to keep your work.
- Does it add kerning, ligatures or support for other scripts?
- No. Spacing comes only from each character's advance width and where its ink sits inside that width: there is no automatic kerning, no ligatures and no complex-script shaping. Fit to ink sets the width so the space after the drawing matches the space before it (none, if the drawing starts left of the origin), and Centre ink moves the drawing to the middle of the width.
- Can I upload an existing font to edit or convert it?
- No. It draws new letters only. It does not open .otf, .ttf, .woff or .woff2 files, and a font file given to Open project is refused with a message saying so, so it cannot be used to copy or convert licensed commercial fonts.
- Is my drawing uploaded anywhere?
- No. The outlines, the font file and the project file are all made in your browser. The font writer, opentype.js, is loaded from this site the first time you export, and the finished file goes straight to your downloads.
The .otf file holds exactly the outlines, advance widths, font name, units per em and Unicode mapping you set, and every export is read back and compared glyph by glyph. There is no automatic kerning, ligatures or complex-script shaping, and characters you have not drawn are left unmapped, so they show the .notdef box or a substitute font. It draws new letters only and cannot open or convert existing fonts, including licensed commercial ones.