Features take one thing
Find what font a website is actually using
F Fonts in use in the toolbar, free with no account
The question is never "what does the stylesheet ask for", it is "what am I looking at". A stack that wants Inter and is quietly getting Helvetica renders as Helvetica, and this says so.
What you get
- The family actually rendering
- Established by measuring the text against fallbacks, not by trusting the first name in the
font-familylist. - Hover to identify
- A chip follows the cursor with the family, size and weight of whatever text is under it.
- Every family on the page
- Each size with the weights it appears in and how often, webfonts flagged and their files named.
- Declared but unavailable
- Families the page asks for and does not get are called out, which is the whole reason the page looks wrong to you and right to them.
- The licence question, raised
- Font files are licensed. The panel says so before you ship one.
How Verbatim does it
Each run of text is measured to establish which family the browser really used, rather than reading the first name in the declared stack. Those measurements are grouped by family, then by size, then by weight, with a use count on each, and each webfont is matched back to the @font-face rule and the file it loaded from. A family that is declared but never renders is reported as exactly that.
How to use it
- Press Alt+Shift+P, then F.
- Hover any text to identify it. Click to copy the whole stack.
- Read the panel for every family on the page at once.
What it will not do
- Text drawn into a canvas or baked into an image is a picture of text, and no font detector can read it.
- Availability is measured, so a family that renders identically to a fallback at that size cannot be told apart from it.
Compared with the DevTools Computed pane
The Computed pane shows the declared font-family stack, which is a list of candidates rather than an outcome. If the first candidate failed to load, is still loading, or was blocked, the text in front of you is a fallback and the CSS has not changed to say so. That is why two people can read the same page and disagree about the font.
Fonts in use measures each run of text to establish which family the browser really used, then groups the whole page by family, size and weight with a count on each, and matches every webfont back to the @font-face rule and file it loaded from.
When to use this one
Use Fonts in use for type alone. Use Design system when you want the type scale beside the palette, the spacing and the radii, and Pick element when you want the font declarations as part of a component you are taking away.
Questions about Fonts in use
Does it show the font that is actually rendering?
Yes, established by measurement rather than by reading the first name in the stack, which is the whole point. A family that is declared but never renders is called out as exactly that.
Can I see every size and weight on the page?
Yes. The panel 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 or to notice a page with eleven sizes that should have five.
Does it tell me where the font file comes from?
It names the source for each webfont, so you can see whether it is Google Fonts, a self-hosted woff2 on the site’s own domain, or a commercial foundry CDN, and which format is being served.
Does it handle variable fonts?
Yes. A variable font is reported as the family it is, with the file named, so you can see one file covering a weight range rather than six static files doing the same job.
Does identifying a font mean I can use it?
No. Open licence faces, including everything on Google Fonts, are free to reuse. A commercial face is licensed per site or per seat and must be bought from the foundry: your browser downloading it to render a page is not a licence for you to ship it.
Already have it? The first thirty seconds covers the shortcut, all thirteen keys and what to do if something does not work.