a font made from 675 pages of my notes.
What you're looking at
Every letter on this page was cut out of real Apple Pencil strokes from my GoodNotes notes: lectures, proofs, assignments, practice exams. Nothing was traced from photos and nothing was redrawn. Each letter and digit has five versions taken from different pages. They take turns as you type, so the same word never comes out the same twice. “Watch it write” replays the actual pen strokes in the order I wrote them.
where each letter came from
Pick a character to see its five versions and the word in my notes each one was cut from.
real or font?
One of these words was written by hand in my notes. The other was typed in the font. Pick the real one.
code in my handwriting
Stavan Mono is the same handwriting squeezed into equal-width cells, so code still lines up. The five versions of each letter still take turns.
# fibonacci, written by hand def fib(n): a, b = 0, 1 for _ in range(n): a, b = b, a + b return a print(fib(10)) # 55
In VS Code, set "editor.fontFamily": "Stavan Mono" and "editor.fontLigatures": true (that second one switches the letter rotation on).
Use it
Stavan is free for personal and commercial use under the SIL Open Font License.
On your computer
Download Regular Download Bold
Double-click a downloaded file and choose Install. The letter rotation works on its own in Pages, Keynote, TextEdit, Figma, Photoshop, Illustrator and every browser. In Microsoft Word, turn on Format › Font › Advanced › “Use Contextual Alternates” once.
On a website
Add this to your page, then put class="stavan" on anything.
As an image, with just a URL
Any text, written by hand, as an animated image. It works anywhere an image does, including GitHub READMEs and Notion. Change the words in the link.
As animated handwriting
Write something on the page above and choose Save › Animated SVG. You get an SVG that writes itself stroke by stroke. It plays in browsers and in GitHub READMEs. To make them from code:
With a real pen
The letters are pen paths, not outlines, so a pen plotter or laser can write them with a single line, the way I did. Download the single-line font and pick it in Inkscape under Extensions › Text › Hershey Text (choose “Other SVG font”). Animated SVGs saved from this page are single-line too and plot as they are.
On every website at once
Drag this button to your bookmarks bar. Click it on any website and the whole page switches to my handwriting until you reload.