cd ../work
fontcheck.tsx
srcworkfontcheck.tsx// 04
FontCheck.
A complete typography playground built for designers and developers to upload, preview, compare, inspect, and pair fonts directly inside the browser with full local-first privacy.
- path
- apps/fontcheck
- category
- frontend
stars forksLocal-first typography workflow
README.mdmarkdown
FontCheck lets users upload fonts, compare them side-by-side, inspect glyphs, preview pairings, and manage typography collections entirely within the browser.
problem
Typography workflows are fragmented across multiple tools, making it difficult to explore fonts, inspect glyphs, compare typefaces, and test pairings efficiently.
solution
FontCheck delivers a local-first typography playground for font uploads, comparisons, glyph inspection, pairings, and collections.
architecture
Built with Next.js App Router, React 19, TypeScript, IndexedDB, Tailwind CSS, Radix UI, and shadcn/ui.
challenges
- Handling local-first font management without cloud uploads.
- Building performant glyph rendering and comparison views.
- Maintaining responsive layouts across devices.
- Keeping the advanced typography workflow intuitive.
outcomes
- Successfully deployed on Vercel.
- Supports TTF and OTF uploads with real-time filtering and comparison.
- Created a privacy-focused typography tool.
- Built a scalable foundation for future typography features.
stack
Next.jsReactTypeScriptTailwind CSSFramer MotionIndexedDBRadix UIshadcn/ui