A font viewer that never uploads your fonts

The real thing, running here

That frame below is the deployed app, and you can use it. Click Load 3 sample fonts, or drag a font off your desktop into it. The file gets read in your browser and goes nowhere.

Drag-and-drop and the bundled samples work inside the frame. "Load my installed fonts" needs a top-level window, so use the tab for that.

Picking type from a folder means opening files one at a time

There is no server, and that shapes everything

Font bytes never get persisted and never leave the browser. The only thing stored is how you organized things: favorites, custom categories, theme, specimen settings. All of that lives in localStorage.

That constraint decides how the thing is built. All the parsing has to happen in the browser, so the app ships its own sfnt table reader for TTF and OTF metadata. It decompresses WOFF2 through WebAssembly just to read the same OS/2 and name tables. Preview still hands the original WOFF2 bytes to FontFace, since browsers decode those natively and re-encoding them would be work for nothing.

Sorting a folder you've never seen

Fonts arrive with no reliable category. Some carry good metadata, plenty carry none, and a few lie. So classification runs as a ladder. Each rung only answers when it actually knows, and hands down when it doesn't.

1. 01
   Fixed pitch flag

   The post table says outright whether every glyph is the same width. If it's set, it's Monospace. Nothing downstream can override that.

2. 02
   PANOSE

   Family Kind settles Script, Display, and Symbol on its own. For Latin Text, the Serif Style digit splits serif shapes from sans, and that includes flared and rounded, which read as sans and usually get miscategorized.

3. 03
   OS/2 family class

   IBM's classification, mapped down to the five buckets. Ornamental and Symbolic classes are protected, so Latin Text PANOSE isn't allowed to overrule them.

4. 04
   Name keywords

   Last resort. mono, code, courier, and the handful of families whose names are more reliable than their tables.

5. 05
   Other

   When nothing above answers, the font goes to Other. You can go find a font in Other. You'll never think to look for a serif under Script.

It won't fake a weight it doesn't have

Browsers will happily synthesize a bold by smearing the outline, and an italic by shearing it. Both look approximately right and are typographically wrong.

Typeshelf only offers the variants it actually loaded. Drop in DejaVu Serif Regular, Bold, and Italic and you get three chips. Drop in Regular alone and you get one. No grayed-out Bold hinting something is missing, and no fake one pretending something is there.

Five schemes, two modes, one token file

A scheme changes the neutrals as well as the accent, so every surface moves when you switch. That means re-checking every color pair in every theme. Ten full palettes.

data-scheme × data-mode  →  CSS custom propertiesno dark: variants in componentsno Tailwind palette classes anywhereno raw color literals outside two documented exceptions

Every token pair carries its computed contrast ratio as a comment in globals.css. Body text clears 14.6:1 in light and15.2:1 in dark, which is AAA.

Twelve findings, and I kept the write-up

I audited it against WCAG 2.1 AA by reviewing every component and recomputing every color pair by hand with the relative-luminance formula. Twelve findings, all resolved. The write-up keeps what was wrong, because that's the useful part.

Six of twelve shown. B1 got fixed with three skip links. I could have moved the settings above the font list instead, but that puts the page out of meaningful sequence just to save someone a tab.

The second theme had to be free

What you can actually use

One constraint, followed all the way down. "Nothing leaves your browser" is easy to put on a landing page. Here it shows up in how the files are parsed, how the categories are decided, how the tokens resolve, and what CI is allowed to fail you for.