--red:#ef4444; --green:#22c55e; --purple:#a855f7;

WHAT IT DOES

This userscript adds a floating CSS Font Inspector panel to any webpage that detects and lists all font families, font sizes, and font weights used across the page. It scans every element using getComputedStyle, extracting the font-family, font-size, and font-weight properties. For each unique font family, it displays the usage count, the sizes it appears in, and the weights it uses. A search filter allows you to find specific font families quickly. You can copy font declarations to the clipboard with a single click. The inspector mode lets you click any element on the page to view its full computed font stack, including family, size, weight, style, line-height, letter-spacing, and text-transform. Clicking the "Highlight" button for any font highlights all elements on the page that use that font family, with the first matching element scrolled into view. All panel interactions use the BGPanel component, which automatically persists per-site position and collapse state.

WHERE IT RUNS

The script runs on all websites (*://*/*) through the BotGentz extension. It does not require any special permissions beyond those already granted by the extension. It works in any modern browser that supports the BotGentz userscript environment. The panel appears automatically on every page load, ready to assist with font analysis and debugging.

HOW TO USE

The panel appears as a floating bubble in the bottom-right corner of your browser window. Click the bubble to expand the panel. The "Fonts" section displays all unique font families found on the page, sorted by usage frequency (most used first). Each font entry shows the family name, usage count, and the sizes and weights that appear with it. Use the search input to filter fonts by family name. Click the "Copy" button on any font to copy "font-family: ...;" to your clipboard. Click the "Highlight" button to highlight all elements using that font—the first matching element will scroll into view with a blue outline. Click "Refresh" to rescan the page for fonts after dynamic changes. Click "Clear Highlight" to remove all element highlights. Click "Inspect Element Font" to enter inspector mode, then click any element on the page to view its full computed font information in a modal overlay.

COMPUTED STYLE SCANNING WITH FONT AGGREGATION AND INSPECTOR MODE

The script iterates through every element on the page using document.querySelectorAll('*'), retrieving computed styles via window.getComputedStyle(). It extracts font-family, font-size, and font-weight for each element. For font-family, the script parses the comma-separated list, normalizes each entry by trimming quotes and whitespace, and aggregates usage counts for the first matching family. It also tracks which sizes and weights appear with each font family, providing a comprehensive view of how fonts are used. The inspector mode adds mouseover highlighting to elements and displays a detailed font information modal when an element is clicked, showing font-family, font-size, font-weight, font-style, line-height, letter-spacing, and text-transform. This approach provides accurate font detection regardless of whether styles are defined in stylesheets, inline styles, or inherited from parent elements. Cross-origin stylesheets do not affect this method since computed styles are accessed directly from the rendered DOM.

THE PANEL

The panel is built using the BGPanel component, which provides a consistent, accessible interface across all BotGentz tools. It supports drag-to-reposition via the header, collapse on click, and stores the panel's position and state per site using GM_setValue. The panel includes a close button (✕) to dismiss it temporarily—the panel reappears on next page load. The settings section includes a dropdown for selecting panel position (bottom-right, top-right, bottom-left, top-left), which is saved globally. The panel has a fixed width of 380px and a maximum height of 80vh, with scrolling for content that overflows. The font list has a maximum height of 200px with internal scrolling. Inspector mode overlays a blue border on hovered elements and displays font information in a modal overlay.

PLEASE NOTE

Requires the free BotGentz extension to run. The script scans all elements on the page using getComputedStyle, which may have performance implications on very large pages—the scan is typically fast for most websites. Fonts that are inherited or set to 'inherit' or 'initial' are handled through computed style resolution. The search filter matches font family names case-insensitively. The script does not collect, store, or transmit any personal data. All font data is read from the page and displayed locally. The highlight feature uses a blue outline overlay that may interact with existing element outlines. Inspector mode mouseover events are cleaned up when the panel is hidden or on page unload.