How-to · Typography
How to find the CSS font stack of any text on a page
The short answer
Start Font Finder's inspector, hover the text, click to pin its detail card, then hit Copy CSS. You get the full font-family stack plus weight, size, line-height, letter-spacing and color as a paste-ready declaration block — built locally in your browser.
- 1
Click the Font Finder icon and press Inspect on the page.
- 2
Hover the text whose typography you want, then click to pin the detail card.
- 3
Check which family in the stack actually rendered.
- 4
Click Copy CSS to get the paste-ready declaration block.
- 5
Paste it into your stylesheet — sizes in px or rem, your choice.
When you want to reuse a site's typography, the font name alone is not enough. You need the whole picture: the fallback stack, the exact weight, the size, the line height, the letter spacing. Chrome DevTools has all of it, but scattered — the stack lives in the Styles panel, the resolved values in Computed, and you copy each property by hand. Font Finder collapses that into one hover and one click.
Pin the text you want to copy from
Click the Font Finder icon, press Inspect, and hover the text. When the tooltip confirms you are on the right element, click it. A detail card pins in place so you can read it without chasing your cursor.
Read the full stack — with the winner marked
The card shows the complete font-family list exactly as the page declares it, and marks which family the browser actually rendered. That distinction matters when you borrow a stack: if the first two names only exist on the designer's machine, your visitors were seeing the third one all along. Font Finder also tells you when the rendered family is a web font the page loaded, so you know whether copying the stack is enough or you need the font files too.
Copy paste-ready CSS in one click
The Copy CSS button writes a declaration block to your clipboard: font-family with the full quoted stack, font-weight, font-size, line-height, letter-spacing and the text color as a hex value. The block is honest about defaults — properties that compute to normal are simply omitted instead of padding the snippet, so what you paste is only what the element actually sets.
Choose px or rem for sizes
If your codebase uses rem units, switch the size unit in Font Finder's settings and the copied font-size is converted against the page's root font size. No mental division by 16 required. Line height is expressed relative to the font size where the page sets it that way, so the ratio you paste scales correctly at any size in your own design.
No DevTools, no upload
Everything happens on your machine. The extension makes no network requests and has no host permissions — the inspector exists only on the tab where you launched it, and Esc removes it. For designers and developers who do this dance daily, that is the entire feature: from "nice type" to CSS in your stylesheet in under ten seconds.