Font Identifier on Hover

WHAT IT DOES

Font Identifier on Hover displays detailed typography information for any text element on a webpage when you hover over it. A small, unobtrusive tooltip appears near your cursor showing the font family (including the full fallback stack), font size, font weight, font style, line height, letter spacing, and text color. The tooltip updates in real-time as you move your mouse across different text elements, making it easy to explore and compare fonts across a page. Click the tooltip to copy all font details to your clipboard—perfect for designers analyzing competitor sites, developers debugging styles, or anyone curious about the typography of a webpage.

WHERE IT RUNS

The extension works on every website with text content, including complex single-page applications, traditional websites, and any page with styled text. It runs locally in your browser, analyzing computed styles without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension is enabled by default. Simply hover over any text on the page—after a brief pause (200ms), a tooltip appears showing the font information. The tooltip includes the primary font name, size, weight, style, line height, letter spacing, and color (with a color preview swatch). To copy all font details, click the tooltip or the "Click to copy font details" hint at the bottom. To customize the experience, open the extension panel and adjust the tooltip position (Above cursor, Below cursor, or Beside cursor). Select a tooltip size (Small, Medium, or Large). Toggle "Show detailed info" to show or hide the full set of font properties. Toggle "Show fallback fonts" to display the fallback font stack. Toggle "Include color in tooltip" to show or hide the text color. For per-site customization, enable or disable the extension on specific websites using the per-site controls.

THE ACTUAL MECHANISM — COMPUTED STYLE ANALYSIS WITH HOVER-BASED TOOLTIP RENDERING

The extension uses a hover-based detection pipeline with debounced activation. When the user moves the mouse, the extension captures the target element and checks if it is a text-containing element (by inspecting the element's tag name and checking for text node children). To prevent excessive tooltip updates, the extension uses a 200ms debounce delay before showing the tooltip. When a valid text element is detected, the extension uses `getComputedStyle()` to retrieve the element's complete computed styles. It extracts `fontFamily`, `fontSize`, `fontWeight`, `fontStyle`, `lineHeight`, `letterSpacing`, and `color`. The font family string is parsed to split the primary font from the fallback stack. The tooltip is then rendered with the extracted information and positioned relative to the cursor using the user's selected position preference. The tooltip's position is adjusted to stay within the viewport boundaries. The tooltip includes a click handler that gathers all displayed font information and copies it to the clipboard using `GM_setClipboard`. The tooltip is hidden when the mouse leaves the text element (with a 300ms delay to prevent flickering) or when the user scrolls or presses Escape. The extension detects dynamically loaded content through MutationObserver, ensuring it works on single-page applications.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, tooltip position selector, tooltip size selector, detailed info toggle, fallback fonts toggle, color toggle, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access, clipboard, and storage engine. The font information displayed is based on computed styles, which may include fallback fonts if the primary font is not installed on your system. The tooltip may not display correctly on very small elements or elements with unusual positioning. The extension detects text-containing elements but may not identify fonts inside canvas or SVG text elements. No personal data, browsing history, or page content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.