// the find
notwaldorf/font-style-matcher
⚡️🎨 Matches the x-heights and widths of two fonts
A single-page tool that helps you match the x-height and letter-spacing of a web fallback font to your target webfont, reducing layout shift during FOUT. It's a UI utility for frontend developers who care about typography and Core Web Vitals, not a library you install.
Solves a real, specific problem that CSS alone can't fix without trial and error. The visual side-by-side comparison makes it immediately obvious what you're tuning. Ships as a PWA with a service worker, so it works offline — sensible for a dev tool. Zero dependencies in the traditional sense; it's just HTML, CSS, and a single app.js.
Last touched in early 2024 and the GIF in the README links to a GitHub CDN URL from 2016 — the project is essentially abandoned. No way to export CSS variables or a snippet you can paste directly into your stylesheet; you have to manually transfer the numbers. Doesn't account for modern `font-display` strategies or `size-adjust` / `ascent-override` descriptor properties, which are the better solution to this problem in 2024+. With 522 stars it has mindshare, but `@font-face` size-adjust descriptors in CSS largely make this kind of manual matching obsolete.