Why WhatFont Fails in 2026: Inspecting Next.js & Variable Fonts
WhatFont is facing Chrome MV2 deprecation and frequently misidentifies Next.js and variable fonts. Here is how modern font inspection works in 2026.
For over a decade, WhatFont was the default browser extension for checking typography on the web. Click the extension, hover over a headline, and an overlay showed you the font family, weight, and size.
In 2026, that workflow is fundamentally broken.
If you have WhatFont installed in Chrome today, you likely see the dreaded amber warning: "This extension may soon no longer be supported" because it was built on Manifest V2. But the architectural obsolescence runs deeper than Chrome extension policies: WhatFont frequently reports the wrong font on modern websites.
The Technical Problem: Why Legacy Font Finders Lie
Modern frontend frameworks don't load typography the way websites did in 2012. Legacy font inspectors rely on inspecting the declared font-family CSS rule on the immediate DOM node. That approach fails across three major modern web patterns:
1. Next.js Font Optimization (next/font)
When a Next.js 14+ site uses next/font/google (e.g., Inter or Geist), it generates scoped CSS class names with local variable fallbacks:
/* What WhatFont reads */
font-family: var(--font-geist-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
If the CSS custom property --font-geist-sans is injected at the root layout or in a CSS module, legacy extensions fail to evaluate the CSS custom property resolution chain. Instead of reporting "Geist Sans", WhatFont falls back down the stack and reports "Arial" or "Times New Roman".
2. Variable Fonts & Optical Sizing
Variable fonts bundle multiple weights and optical sizes into a single binary file (woff2), adjusted via CSS font variations:
font-family: "Cabinet Grotesk Variable";
font-variation-settings: "wght" 580;
font-optical-sizing: auto;
Legacy inspectors only parse integer values from standard font-weight: 400 or 700. When confronted with non-standard weights (like 580 or 650) or dynamic axes, they round blindly or default to regular 400.
3. Font Loading APIs & Flash of Unstyled Text (FOUT)
Modern web apps use FontFaceSet.prototype.check() and font-display: swap. Elements often render with fallback metrics before swapping. Legacy tools take a snapshot on initial hover without verifying whether the remote font face has finished decoding in the browser's font cache.
The Comparison: WhatFont vs. Modern Inspection
| Feature | Legacy WhatFont | Modern Computed Inspection (Moa) |
|---|---|---|
| Extension Platform | ⚠️ Manifest V2 (Flagged / Deprecated) | ✅ Manifest V3 Native |
| Next.js & Variable Fonts | ❌ Resolves to Fallback (Arial/Times) | ✅ Resolved Computed Font Face |
| Typography Specs | Name, Size, Line-Height | Family, Weight (Numeric), Size, Line-Height, Letter-Spacing, Computed Color |
| Viewport Ergonomics | ❌ Clunky bubble that covers text | ✅ 32px Non-Intrusive Pill HUD |
| Font Repository Links | ❌ None (Manual Google search required) | ✅ 1-Click Link to Google Fonts, Fontshare, Adobe, Noonnu |
| Figma Handoff | ❌ None | ✅ Copy as Editable Figma Auto-Layout |
How to Inspect Modern Web Fonts Accurately
Accurate typography inspection requires evaluating the computed style tree and testing against the browser's active font faces rather than reading raw CSS strings.
Here is the 1-second workflow using Moa:
- Hold Option (Win: Alt) on any web page.
- A 32px ultra-slim HUD appears instantly above your cursor, showing the exact rendered font family, computed weight (e.g.,
Weight: 550), font size, and line-height. - Because the HUD is only 32px tall, it never obstructs the letterforms you are inspecting.
- Click the element while holding Option to pin the style card.
- Need to download the font for your own design mockups? Moa's typography resolver maps the detected family against 9 major font repositories (including Google Fonts, Fontshare, and commercial foundries), providing a direct 1-click download link.
Never Guess a Font Stack Again
Stop opening DevTools F12, digging through 400 lines of Tailwind utility classes, or trusting an abandoned extension that reports every modern font as Arial.