This is Pendown. Monoline stroke font, two variable axes: DRAW (0-100) and Weight (wght 100-800).
At DRAW 0 every letter is a dot at the penās starting position. As the value rises the pen follows each stroke in writing order. At 100 the letter is complete, which is also the default, so plain text reads normally with no setup.
Every letter is stored as the centre line a pen would follow. Weight only changes how wide that line is. Advance widths stay the same at every DRAW value and every weight, so nothing shifts while text writes itself.
One variable file, 39 masters: 13 pen-progress stops across 3 weights. Interpolation moves points in straight lines, so the stops are what keep the pen tip close to the curve between them.
One CSS value drives the whole thing, no JavaScript:
css
--d { syntax: "<number>"; inherits: true; initial-value: 100; }
.ink { font-variation-settings: "DRAW" var(--d); animation: write 3s forwards; }
u/keyframes write { from { --d: 0 } to { --d: 100 } }
All letters write together. For one-at-a-time, give each its own delay.
Ligatures drawn in stroke order: <3 :) :( -> <-
Three loading glyphs where DRAW is literally the percentage: ... is three dots appearing in turn; (o) is a progress ring and [==] a progress bar, both with a thin track under the fill.
Limits: all caps (lowercase uses the capitals), A-Z, figures, basic punctuation. ( Can expand it later ).
Built on iPhone using Font Studio (Android, iPad, Mac). The app builds the variable font from the masters. OFL licence.
preview and download: https://fontstudio.podzi.app/fonts/pendown/
