Font Identifier

WHAT IT DOES

Font Identifier reveals the exact font information for any text element on any webpage. Hover over or click any text to instantly see its primary font family, full font stack, size, weight, style, color, line-height, and letter-spacing. The tool automatically detects whether a font is a web font or a system font, and for web fonts it displays the source URL and loading status. The fallback stack is shown in full, helping you understand which fonts the browser tries before rendering the final text. All font properties are displayed in a clean, copyable format for easy documentation or debugging.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All font detection, style computation, and DOM traversal occur on your machine without any network requests. No page content, font data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the Font Identifier panel. Click the "Toggle Inspector" button to activate the identification mode. Move your mouse over any text on the page; the panel updates instantly with all font properties for that element, and a highlight box surrounds the text. Click an element to lock the selection for detailed review. The "Show all font families" toggle displays the complete font-family declaration including fallback fonts. The "Show fallback stack" toggle reveals the ordered list of fallback fonts. The "Highlight on hover" toggle controls the visual overlay. Use the "Copy Font Info" button to copy all font data to your clipboard.

THE FONT DETECTION ENGINE — WHY IT WORKS

Most font identifiers simply read the font-family string from computed styles, which only shows what was declared, not what actually rendered. This tool uses the browser's native getComputedStyle API to retrieve the exact rendered font-family value, then parses it into a structured list of individual font names. To detect web fonts, the tool iterates through all stylesheets in the document, scanning for @font-face rules and matching their font-family declarations against the element's rendered font. When a match is found, the tool extracts the src URL and identifies the font source as a web font. This dual approach—combining computed style inspection with stylesheet analysis—provides a complete picture: the declared family stack, the rendered primary font, whether it's web-hosted or system-based, and where the font loads from. The tool also handles cross-origin stylesheets gracefully, skipping them without breaking the inspection.

THE PANEL

The Font Identifier panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the font details output area and controls adjust proportionally. Press the Escape key to deactivate the identifier mode and close the panel instantly. The panel maintains independent state for each browser tab, allowing you to identify fonts in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites continuously evolve their font delivery methods and use new CSS specifications; while the tool works across most modern sites, complex scenarios like variable fonts, font-display timing, or shadow DOM may require additional handling. All font data is stored locally in your browser's storage and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.