Inspect fonts on any page
Hover and click text to see the live typeface, size, weight, style, and color—near the element or in a sidebar—without opening DevTools.
what the font - font finder
Identify the typeface and CSS typography on any webpage element—family, size, weight, line height, letter spacing, color, and contrast—then copy or export what you need without leaving the tab.
Built for live typography
Features
Typography details that matter
Read line height, letter spacing, transform, decoration, and contrast (including AAA/AA cues) in one panel.
Copy CSS in one click
Copy the font family, color, or a ready CSS snippet for the element you inspected.
Edit styles on the page
Tweak weight, size, spacing, color, and more on the live element, then reset when you are done exploring.
All fonts on the page
Scan unique text styles across the page and jump between them when auditing a design system.
Export and Google Fonts
Export typography as SCSS or JSON, or open a Google Fonts search for the family you found.
Simple by design
About us
A Chrome extension that reveals live typography—typeface, size, weight, color, and contrast—so you can inspect, copy, and export fonts from any webpage.
- —
- Published usage total
- —
- Verified review count
Chrome Web Store
Users about us
Illustrative feedback placeholders — Chrome Web Store reviews will replace these when connected.
★★★★★
“I can grab family, weight, and hex color from a live site without opening DevTools.”
★★★★★
“Copy CSS and contrast in one panel is exactly what I need during audits.”
★★★★★
“All fonts on page helps me spot inconsistent type across a landing page fast.”
Three quick steps
How to use
-
Install the extension
Add what the font - font finder from the Chrome Web Store and pin it to the toolbar.
-
Start inspecting
Open the popup, start inspecting, then hover and click any text on the page.
-
Copy or export
Copy CSS, export styles, open Google Fonts, or browse all fonts on the page.
Answers before you install
FAQ
How do I identify a font on a website?
Install what the font - font finder, start inspecting, hover the text, and click to open the panel with family, size, weight, and color.
Can I copy the CSS for the type I see?
Yes. From the panel you can copy the font family, color, or a CSS snippet for the inspected element.
Does it work on every page?
It works on regular website tabs. Chrome system pages and some restricted URLs cannot be inspected.
Can I see all fonts used on a page?
Use All fonts on page to list unique visible text styles and open any of them in the detail panel.
Can I change the look while inspecting?
Yes. Edit weight, size, spacing, color, and related styles on the element, then reset to restore the original.
Where do I open Google Fonts from?
When the family looks searchable, use the Google Fonts action in the panel to open a query for that name.