Your first font inspection
Install the extension from the Chrome Web Store and pin it using Chrome’s extensions menu. Open a normal website, refresh the page, and click the Font Inspector icon. Choose Pick text on page, then point at a heading or paragraph. Click the text to lock the inspection panel. You can also right-click text and choose Inspect Font.
Get comfortable with the shortcuts
Press Alt + Shift + F to start picking. While the picker is active, use the up and down arrow keys to move between a parent and child element. Click or press Shift to lock the selection. Press Escape to cancel picking.
Read the typography details
The inspection panel shows the family stack, reported rendered font, source, weight, size, line height, and letter spacing. It also includes text and background colors, variable axes when available, OpenType settings, and the selector path.
Copy a style into your project
Copy an individual value when you only need the size or color. For a larger handoff, choose a complete style in CSS, Tailwind, or SCSS format. Review the result in your project: copied values do not include a font license or automatically load the font.
See all fonts on a page
Open Fonts on this page to see families ranked by their share of text, along with weights, sizes, and fallback warnings. Hover over a family to outline where it appears. Inspect a sample or save the page’s fonts for later comparison.
Build your own font library
Inspections are saved locally. Use filters, pins, and collections to organize discoveries, then compare up to four fonts side by side. Export as JSON for a backup, or choose CSS variables or design tokens for a project handoff.
When something does not work
Refresh pages that were open before installation or an update. Chrome blocks inspection on internal pages and the Chrome Web Store. Text embedded in images or canvas is not live HTML text and cannot be identified with CSS inspection.