Web Font Lister

WHAT IT DOES

Web Font Lister scans the current page's computed styles and @font-face declarations to detect every font family in use. For each font, it shows the family name, usage count (how many elements use it), source (System, Google Fonts, Adobe Fonts, Custom, Data URI, or Unknown), weight variants used, style variants used, and a live sample text preview rendered in that font. It also displays the @font-face source URL when available, helping you trace where web fonts are loaded from. Perfect for designers checking font consistency, developers auditing third-party font usage, or anyone curious about what fonts a page is actually using.

WHERE IT RUNS

Any webpage—the script scans the DOM and computed styles directly, so it works on local files, development environments, production sites, and pages behind authentication. No server-side calls, no external dependencies, no site-specific configuration. Detects fonts loaded via Google Fonts, Adobe Fonts (Typekit), self-hosted web fonts, and system fonts.

HOW TO USE

Install the script and open any page. The panel automatically scans and displays all fonts in use. Use the search box to filter by font name, source, or weight. Toggle "System" and "Web" checkboxes to show or hide those categories. Sort fonts alphabetically or by usage count (most used first). Click "Copy List" to copy the entire filtered list to your clipboard for documentation or sharing. Keyboard shortcut: Ctrl+Shift+F to re-scan without opening the panel.

TECHNICAL MECHANISM

The script scans all elements on the page using document.querySelectorAll('*') and reads window.getComputedStyle(el).fontFamily for each element. It normalizes font-family strings (splitting by comma, stripping quotes), aggregates counts per family, and tracks weight and style variants. For @font-face detection, it iterates over document.styleSheets, accessing cssRules or rules, and filters for CSSRule.FONT_FACE_RULE (type 5). It extracts the font-family and src properties from each rule. Source detection uses heuristics on the src URL: fonts.googleapis.com indicates Google Fonts, use.typekit.net or adobe indicates Adobe Fonts, data: indicates Data URI, and relative/absolute paths indicate Custom fonts. System fonts are identified against a built-in list of common system font names (Arial, Helvetica, Verdana, system-ui, -apple-system, etc.). The result is rendered with a live preview using the font-family directly on the sample text element.

THE PANEL

The tool runs inside BGPanel, a lightweight UI system built into the BotGentz extension. Drag the panel by its header to reposition it anywhere on screen—it snaps to edges and remembers its position per site. Click the header to collapse the panel into a small bubble; click again to expand. Resize the panel by dragging its bottom-right corner. Press Escape at any time to close the panel. The panel stays out of your way but is always accessible via the extension's toolbar.

PLEASE NOTE

Requires the free BotGentz browser extension to run—this script does not work standalone. The script reads only computed styles and CSS rules—it does not send data anywhere, does not store page content, and does not access other tabs or browser history. Font detection depends on the page being fully loaded; scan after page load for best results. System font detection uses heuristics and may misclassify some fonts—font names that match system font names but are actually web fonts may be incorrectly labeled. Sites with complex font loading or shadow DOM may require a manual re-scan. Cross-origin stylesheets may restrict access to CSS rules (CORS), limiting @font-face detection on some sites.