Guides CSS
How to find what font a website is using
Install Verbatim, the free Chrome extension, and open the page. Press Alt+Shift+P, choose Fonts in use, and hover the text. The box names the family the browser actually rendered, established by measurement rather than by reading the first name in the CSS stack, along with its size, weight and the webfont file it came from. Click to copy the whole stack.
What you need first
Verbatim is a free Chrome extension that reads the CSS actually applying to a live page, by resolving the cascade rather than dumping computed styles. Thirteen tools sit on a toolbar inside the page itself, not in a popup: pick an element, measure it, pull the palette and type scale, turn the page into a prompt, or hand any of it to a coding agent.
It is free forever with no account and no sign in, nothing is uploaded anywhere, and it works in Chrome, Edge, Brave, Arc and Opera. Install it, then follow the steps below on any page, including one behind a login.
Why the CSS font stack does not tell you the answer
A font stack is a list of candidates in order of preference. It is not a statement of what you are looking at.
Take font-family: "Inter", Helvetica, Arial, sans-serif. If the Inter webfont failed to load, or is still loading, or the page is on a network that blocked the font host, the text in front of you is Helvetica or Arial. The CSS has not changed. The rendering has.
This is why two people can read the same page and disagree about the font, and why a rebuild that copies the stack can look different from the original on a different machine. The only reliable answer comes from asking the browser what it actually used for that run of text, which is what measurement means here.
The ways to identify a font on a website, compared
| Method | What it tells you | What it misses |
|---|---|---|
| DevTools, Computed | The declared font-family stack for the element. |
Which candidate in the stack actually won. It shows the list, not the outcome. |
| DevTools, Rendered Fonts | The real family for the element you selected, with a glyph count. | Everything about the rest of the page: no inventory, no sizes, no weights, no use counts, and no link back to the file. |
| Identify-by-image tools | A guess at a similar typeface from a picture of the letters. | Certainty. They are for print and photographs. On a web page the answer is already available exactly, so guessing is a strange choice. |
Reading @font-face in the stylesheet |
Every face the site declared, and the URLs they load from. | Which of them the page uses, where, and whether any of them failed. A site can declare twelve faces and render three. |
| Measuring every text node | Every family actually rendering, each size with the weights in use, a use count for each, and the file behind each webfont. | Nothing about licensing. Identifying a face is not permission to use it. |
Fonts in use is the last row.
How to find the font a page uses, step by step
Hover to identify one run of text, or open the panel for the whole page at once.
- Add Verbatim to Chrome. It is a free extension, there is no account and no sign in, and it works in Chrome, Edge, Brave, Arc and Opera.
- Open the page and press Alt+Shift+P, or click the Verbatim icon.
- Choose Fonts in use. The readout tells you to hover any text.
- Hover the text you are curious about. The box names the family actually rendering, with the size, the weight and the source of the file.
- Click to copy the whole font stack, so the fallbacks come with it rather than just the winner.
- Open the panel for the whole page: every family on it, each size with the weights it appears in, how often each is used, and the file behind each webfont.
The use counts matter more than they look. A family with 194 uses is the page's typeface; a family with three is a logo, an icon set or something left behind by a widget. That distinction is what tells you which faces a rebuild actually needs.
How to find the font file, and whether it is a webfont
The panel separates webfonts from system fonts, and for each webfont it names the file the page loaded. That tells you three useful things at once.
- Where it is served from. A Google Fonts URL, a self-hosted
.woff2on the site's own domain, or a commercial foundry's CDN. Each implies a different licence and a different cost to reproduce. - Which format. Modern sites serve
woff2. An older stack withwofforttffallbacks tells you something about the build. - Whether it is variable. A single file covering a weight range behaves differently from six static files, and a rebuild that loads six static weights when the original loaded one variable file will be heavier than the original.
A face that is declared but never renders is called out as well, which is usually the explanation when a page looks wrong to you and right to the person who built it.
Finding every size and weight on the page
Identifying the family is the easy half. Rebuilding needs the scale: which sizes exist, which weights each size appears in, and how often each combination is used.
The panel lists exactly that, per family, in a specimen you can read. It is the fastest way to see that a page has eleven type sizes when it should have five, which is a design audit finding rather than a curiosity.
If you want the type scale beside the palette, the spacing and the radii, that is the whole-page view: Design system, and how to extract a website's colour palette covers the same panel from the colour side.
Can you use the same font?
Identifying a typeface tells you nothing about whether you may use it, and the two questions get mixed up constantly.
Open licence faces, including everything on Google Fonts, are free for commercial use, and a site self-hosting one is not evidence of anything you cannot do yourself. Commercial faces are licensed per site, per seat or per pageview, and a font file being downloadable from a site is not a licence: your browser downloaded it to render that site, which is exactly what the licence permitted.
The practical route is to find the family, then buy or download it from the foundry under your own licence. If it is out of budget, the panel gives you the metrics you need to pick a close free alternative, which is a better outcome than shipping a face you have no right to.
Questions
How do I find out what font a website is using?
Open the page, press Alt+Shift+P, choose Fonts in use, and hover the text. The box names the family the browser actually rendered, with the size, the weight and the webfont file behind it. The whole-page panel lists every family on the page with its sizes, weights and use counts.
Why does DevTools show a different font from what I see?
The Computed pane shows the declared font-family stack, which is a list of candidates rather than the outcome. If the first candidate failed to load or is still loading, the text in front of you is a fallback. Measuring the rendered text tells you which candidate actually won.
How do I find the font file a website loads?
The Fonts in use panel names the source file for each webfont, so you can see whether it is Google Fonts, a self-hosted woff2, or a commercial foundry CDN, and which format and weights the page actually loads.
Can I download a font from a website and use it?
You can download the file, because your browser already did in order to render the page, but that is not a licence. Open licence faces such as those on Google Fonts are free to reuse. Commercial faces are licensed per site or per seat, and must be bought from the foundry.
How do I find every font size and weight used on a page?
Open the Fonts in use panel rather than hovering. It lists each family with every size it appears at, the weights at each size, and how often each combination occurs, which is what you need to reconstruct a type scale.
Does it work with variable fonts?
Yes. A variable font is reported as the family it is, and the file it came from is named, so you can see that one file is covering a weight range rather than six static files doing it.
Is there a font finder that works on pages behind a login?
A browser extension does, because it runs in your own session on the page you are already looking at. Anything that fetches the page from a server cannot see a dashboard, a checkout or an admin panel.