harshpreet-hand

Every letter comes from the notes: it was found in the page photos, then redrawn along the pen's path with one steady ballpoint nib. Each letter has 2–3 real variants from different pages that rotate as you type, so doubled letters never look stamped.

Watch it get built

2x speed. Full 65-second video (MP4). Every frame is real pipeline output, made with Remotion in video/.

Use it in one line

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/harshpreet931/harshpreet-hand@v1.0.0/dist/harshpreet-hand.css">
<style>
  body { font-family: "Harshpreet Hand", cursive; line-height: 1.6; }
</style>

Or install it on your computer for Figma, Keynote, Word and the rest: grab HarshpreetHand-Regular.ttf and -Bold.ttf from the latest release.

What's in dist/

Add it to a site as a theme

1. Copy the .woff2 (and optionally .woff) files into the site, e.g. public/fonts/.
2. Copy harshpreet-hand.css next to them (or paste its rules into your global CSS) and fix the url() paths if needed.
3. Turn the theme on: document.documentElement.dataset.theme = "handwritten".

[data-theme="handwritten"] {
  font-family: "Harshpreet Hand", "Segoe Print", cursive;
  font-size: 1.15em;   /* x-height is 0.44 em, a bit smaller than UI fonts */
  line-height: 1.6;    /* room for the long g / y loops */
  font-feature-settings: "calt" 1, "kern" 1;
}

Tips:

• Keep line-height at 1.5 or more. The g and y loops go deep, just like in the notes.
• Use it for headings and prose. Keep code, tables and dense UI in your normal fonts. The theme CSS already does this for code/pre.
• Optional classes in the CSS: .notebook adds ruled paper with a red margin line, .notebook-spacing adds the wide word gaps from the notes, and .plain-r switches to the plain r.

Features

• calt (on by default): every letter and most figures have 2–3 real variants from different pages. The font rotates through them as you type, so hello → h, e², l³, l¹, o² and doubled letters never look stamped. Each variant also sits slightly higher or lower than the others, like real handwriting.
• ss01: a plain r without the little loop at its foot.
• kern: kerning computed from the letter outlines (e.g. To, Ty, r.).
• Coverage: A–Z, a–z, 0–9, ASCII punctuation, curly quotes, dashes, … • · ° × ÷, arrows → ← ↑ ↓ (taken from the arrows in the notes' margins), and Western European accents.

Quirks it keeps

Ring-dotted i/j · looped l · r with a small loop at its foot · curled d · t crossed on the right only · curl-footed 2 · the crossed-leg & · hook-headed → · the rounded W with a tall first stroke · the barred I.

How it was made

The source is CN_CompleteNotes_FullSyllabus.pdf: 120 phone photos of my Computer Networks notes, covering the full syllabus. (If you're studying CN, they're yours to read too.)

What it cost

Measured, not estimated: pipeline/session_stats.py totals the usage blocks in the Claude Code session log and prices them at Claude Opus 5.5 API rates. Prompt caching is what kept it at $13.68 instead of $140.

Rebuild it

brew install potrace                      # or: apt install potrace
python3 -m pip install -r requirements.txt
pipeline/run_all.sh                       # ≈10 min; intermediates go to work/
pipeline/run_all.sh font                  # only the font, after tweaking spacing or weight

Things you can tweak in pipeline/build_font.py:

• WEIGHTS: nib size per weight (pen is a fraction of the x-height; Regular 0.13, Bold 0.20). Add a Light entry for a third weight.
• SB / SPACE: letter and word spacing.
• FAMILY / PS_FAMILY: the font's name.

To swap a variant, change its source [page, word id, group] in design/picks.json (python3 candidates.py abc out.png shows the numbered candidates), then run run_all.sh.

Make one from your own handwriting

The pipeline is tuned to these notes (blue ballpoint on ruled paper, shot on a phone), but every step is a plain script and every choice specific to my hand lives in a file you can edit:

1. Put photos of your pages into one PDF. Blue ink on ruled paper works as is; for other inks, adjust the colour model in pipeline/ink.py.
2. cd pipeline && python3 render_pages.py ~/my-notes.pdf && python3 segment_all.py splits every page into words. python3 segment.py 4 13 38 then draws numbered contact sheets for those pages (work/seg/sheet_p004_0.png, …).
3. Replace labels/*.txt with your own transcriptions (labels/p004.txt for page 4), one id: word line per word. About 700 words gave me 2–3 good variants of most letters.
4. python3 harvest.py && python3 select_samples.py, then choose your variants in design/picks.json (python3 candidates.py abc out.png shows the candidates).
5. Set FAMILY / PS_FAMILY and the name strings in build_font.py, then python3 design.py && ./run_all.sh font.

construct.py builds G, J, X and most punctuation from parts of my letters, so check those against your hand. The shortcut is the way this one was made: open the repo in Claude Code next to your PDF and ask it to adapt the pipeline to your handwriting.

Limitations

• A few capitals (V, W, Z) had only one clean sample in the notes, so they have one variant.
• G, J, X and most punctuation were built from other parts of the hand rather than traced directly.
• No hinting: it renders well at normal web sizes on modern browsers, but it isn't tuned for tiny text on old Windows ClearType.

License

• Fonts (dist/*.ttf, *.woff, *.woff2) and glyph data (design/): SIL Open Font License 1.1. Use, embed and ship them in personal or commercial work; you can't sell the font on its own.
• Code (pipeline/, video/): MIT.
• Notes and images (CN_CompleteNotes_FullSyllabus.pdf, assets/): CC BY 4.0.

If you make something with it, or a font from your own handwriting, I'd love to see it. Open an issue or tag