Experiment
Font Detective started because the BrightHR design team discovered we had a typography problem. Not a small one. The web estate was using dozens of different font styles, weights, and sizes with absolutely zero governance or documentation. Typography had just... evolved. Inconsistently. Across multiple products and pages. Over years.
We needed an audit. A comprehensive one. But manually trawling through hundreds of pages in the product - inspecting elements, noting font families, weights, sizes, line heights - would take days of tedious work. Maybe weeks.
There had to be a better way.
So I built a Chrome extension that automates the entire typography audit process. Single click, scan any page, extract every font style in use, produce a detailed report sorted by style and usage frequency. What would have taken the team days now takes seconds per page.
Complete audit of the entire BrightHR web estate in a fraction of the time. Problem solved.
Built entirely in VSCode using GitHub Copilot Chat with Claude Sonnet 4.5. It's available on the Chrome Web Store, and honestly it's become indispensable for our design system work.
Why I Built This
Days of manual work. That's what we were facing. Inspecting every page, every element, documenting every font variation. The BrightHR design team didn't have days to spare on manual inspection when we could automate it.
What I needed:
- Replace page-by-page inspection with automated font extraction
- Generate sortable reports showing usage frequency and patterns
- Let the team identify inconsistent typography and establish governance
- Make it reusable for future audits (because this won't be the last time)
The technical challenge was building a performant DOM traversal system that could extract deep font styles from complex web applications while maintaining real-time highlighting and sorting - all within Chrome's Manifest V3 architecture constraints.
How It Works
Font Detective analyses any webpage with a single click. No manual element inspection required.
Depth-first DOM traversal captures deepest text nodes. Optional inclusion of hidden elements (display: none, visibility: hidden - sometimes you need those too).
Two view modes: Summary view aggregates font usage with occurrence counts. Detailed view gives you complete breakdown with sortable columns - font family, size, weight, line height, element tags. All sortable.
Live element highlighting is where it gets useful. Hover over results and watch the corresponding text highlight on the page in real-time. Click any font entry to see detailed overlay information directly on the page. Visual inspection mode with ESC to exit.
One-click copy of all font data to clipboard for documentation or reports. Export everything, paste into your audit document, done.
Extracts comprehensive details: font family, size, weight, line height, element tags, text examples, computed styles. Everything you need to document what's actually being used.
Architecture is content script injection for page analysis. Popup-based UI with tab navigation. Event-driven communication between popup and content scripts. Uses Chrome Extensions API (chrome.scripting, chrome.tabs) and DOM API (getComputedStyle, traversal).
Why This Matters
For BrightHR specifically, it transformed our typography audit from multi-day manual slog into rapid, systematic analysis. Audit the entire web estate in hours instead of days. Sortable reports showing exactly which fonts appear most frequently and where inconsistencies exist.
Design system audits become manageable. Instantly identify inconsistent font usage across large web estates. Establish baseline for design system compliance. Catch unintended font variations before they spread.
Efficiency gains are significant. Manual inspection that took minutes per page now happens in seconds. Comprehensive extraction of every relevant detail.
Reusability matters. Built for BrightHR but useful for any web professional doing typography audits, accessibility testing, competitive research, or quality assurance.
Data-driven decisions. Sortable reports by usage frequency help teams prioritise which inconsistencies to address first. Focus remediation efforts where they'll have the most impact.
What I Built It With
Chrome Extension using Manifest V3. Pure vanilla JavaScript (ES6+) - no external dependencies. HTML5 and CSS3 for UI.
Chrome Extensions API (chrome.scripting, chrome.tabs, activeTab permissions). DOM API (getComputedStyle, DOM traversal).
Content script injection for page analysis. Popup-based UI with tab navigation. Event-driven communication. Depth-first traversal algorithm for comprehensive text node capture.
All font analysis and rendering happens client-side. No external API calls. No data transmission. Just local analysis of whatever page you're viewing.