Computed Font Finder - Typography Inspector

Find the exact rendered font on any element. Shows computed font-family, size, weight, and line-height instantly.

Computed Font Finder identifies the exact font the browser actually rendered on any element. When CSS specifies a font stack like Inter, Roboto, sans-serif you see all three names in DevTools but you don't know which one loaded. This extension tells you instantly. Two modes for font inspection: PAGE SCAN — One click to audit all typography on the page Lists every rendered font family with usage count and preview Shows which font weights are used with human-readable names like Regular, SemiBold, Bold Font size distribution chart showing all sizes and how often each appears Font stack to rendered font mapping showing exactly which fallback the browser selected Loaded font files listing from the document.fonts API with loaded or unloaded status Click any font family to copy its font-family CSS declaration ELEMENT PICKER — Click any text on the page Live hover tooltip previewing font name, size, and weight as you move your mouse Click to capture full computed typography details Preview card rendering the selected text in its actual font Shows rendered font, full font stack, size, weight, line-height, letter-spacing, color, and text-transform Copy CSS button exports the complete font declaration ready to paste into your stylesheet Uses the document.fonts.check API to determine which font in the declared stack actually rendered rather than just showing the first font in the stack like DevTools does. No data is collected. No API calls. Everything runs locally in your browser. Built by Egochi — WordPress web design and development experts.