What the Font - Font Finder

Hover any text on a page to reveal typeface, size, weight, and color. Inspect with What the Font - Font Finder in one click.

When a layout looks almost right but you cannot name the typeface, the usual path is a screenshot, an upload form, and a long wait. Designers, front-end developers, marketers, and QA reviewers often need the answer on the live page itself: which family is loaded, what size and weight are applied, and whether contrast is safe to ship. This Chrome extension stays on the page you already have open. Move the pointer across headings, buttons, captions, and body copy. A compact panel shows the computed typeface stack, pixel size, weight, style, line height, letter spacing, and color. Click to freeze a selection, compare nearby elements, and copy CSS snippets without jumping to DevTools for every check. Edits you try in the panel stay local to your session so you can test a weight or size shift before you change the stylesheet. Who it helps day to day: 1. Product designers matching comps against production 2. Developers verifying tokens after a deploy 3. Content teams checking hierarchy on landing pages 4. Accessibility reviewers scanning contrast on text 5. Agencies auditing client sites before handoff How a typical pass works: 1️⃣ Open the site or staging URL in Chrome 2️⃣ Start inspect mode from the toolbar or the context menu 3️⃣ Hover text to read live metrics in the side panel 4️⃣ Click to lock a sample when you want a longer look 5️⃣ Copy family, size, weight, or color into your notes or CSS ➤ Reveal the active face even when a stack lists several fallbacks ▸ Compare two nearby blocks without opening a separate inspector • Spot weight and size drift between desktop and responsive views Teams ask what font is this when a screenshot lands in Slack or a stakeholder deck. You can answer faster when the source page is still in a tab: inspect the live node, confirm the computed family, and share exact CSS values instead of guessing from a flat image. A practical font identifier workflow also covers stacked web fonts—many pages load a brand face plus system fallbacks, and the panel surfaces what the browser actually used for that node. If you need a quick font detector during a review call, keep the panel open while you scroll. Metrics update as you move, so you can narrate hierarchy changes without pausing to dig through Elements. Brand partners sometimes send a crop and want an image-only guess; when the original URL is available, prefer the live page so you get weight, size, and color together. Image matching remains a separate path—this tool is built for pages you can open. Typography systems mix font styles and types across a single marketing site—display headings, UI labels, and dense article body. Walking the page with the inspector makes those roles visible so you can document which face belongs to which role before anyone renames tokens in Figma. When stakeholders say what typeface without pointing to a node, share a locked sample: family name, size, and a short CSS paste that turns a vague request into a design-system record. Need a font name lookup for a third-party widget? Inspect inside the frame when the page allows it, then copy the family string into your inventory spreadsheet. For competitive research, match font on website templates—home, pricing, blog—and log the faces you see. If you want a dedicated chrome font extension for daily audits, pin the action and use the toolbar or context-menu trigger the same way you open other inspect tools. Designers hunting similar fonts for moodboards can still start from the live sample, then explore nearby options in a foundry library with less trial and error. FAQ - Does it replace DevTools? No. It speeds up common typography checks so you open DevTools only when you need box model or network detail. - Does it upload page content? Inspection runs in your browser session for the pages you visit; use your own judgment on sensitive staging sites. - Can I copy styles? Yes. Grab family, size, weight, color, and related CSS values from the panel when a sample is locked. - Works on every site? Most standard HTML text nodes are supported. Heavily canvas-drawn or image-only lettering is outside scope. - Good for accessibility? Contrast and size readouts help spot risky text before a full audit. Keep the loop short: open the page, inspect, copy, move on. Install what the font - font finder when you want that rhythm on every review tab. 💳 Some features may be available by subscription. A trial period may be available. This extension may show promotional content or advertisements.