Font Inspector

Font Inspector — Decode Any Webpage's Typography System Font Inspector is a professional browser extension that helps frontend engineers, UI/UX designers, and typography enthusiasts quickly deconstruct the font system of any webpage. Whether you want to "borrow" a site's font combination or audit your own product's type scale, simply hover and click to get a complete analysis—from single-element properties to full-page typography. Why Install Font Inspector? Hover to Inspect Move your cursor over any element to instantly reveal its complete typographic profile: font family, size, weight, line height, letter spacing, color, alignment, and more. No DevTools, no source digging—just hover and discover. Tailwind Class Mapping Every detected property is automatically translated into corresponding Tailwind CSS utility classes. See a style you like? Copy the classes and reuse them in your own project immediately. Full-Page Blueprint Toggle the Blueprint overlay to visualize an entire page's typographic hierarchy at a glance. Font gradients, size scales, and color usage are laid bare—making it the fastest way to audit your own design system or reverse-engineer a competitor's typography. Structured Typography Reports Generate detailed, numbered reports (text run statistics, font clusters, size scales, color usage) presented in an elegant typography specimen style. Save them to your local bookmarks for offline reference. Google Sheets Sync Sync your favorite font combinations to Google Sheets for cross-device access and team sharing. With incremental two-way sync based on MD5 hashing, your inspiration library stays clean and up to date—no duplicates, no junk. Who Is It For? Frontend Engineers — Reverse-engineer any site's font system and reuse it instantly UI/UX Designers — Capture typography inspiration and build a personal reference library Typography Enthusiasts — Explore the hidden patterns of how the web uses type Elegant, Focused, Fast Font Inspector runs as a lightweight Chrome extension with a refined typography-specimen aesthetic, full light/dark theme support, and customizable keyboard shortcuts (default: Alt+F). It won't slow down your browser or interrupt your workflow—it appears when you need it and fades away when you don't. Install Now Stop guessing at fonts. Start inspecting them. Add Font Inspector to Chrome and make every typographic decision on the web transparent, understandable, and reusable. For everyone who needs to understand, replicate, or simply appreciate great web typography. Need help？ Contact chuffedrich@gmail.com