Font Finder from Website: See the Declared Font Stack

You see a typeface on a site and want its name, so you look for a font finder from website text. Point at the text, and the Typography section shows the font family the page declares, with its size, weight and line height. That is the declared font stack, not a check of which font the browser actually rendered. SuperchargeInspect reads the live text on the page so you can see and copy the styles in one pass.

What a Font Finder from Website Shows

When you inspect font styles on a page, the Typography section gives you the whole set. Point at any text and it opens with the font family. It shows the first family in the list as the label. Click that label to copy font-family and the full declared font stack goes to your clipboard.

The Size stat shows the font size with the line height after a slash, like 16 / 24, and one click copies both together as 16px / 24px. Weight is its own value and Tracking shows the letter spacing.

The section also shows a specimen that renders in the element’s own font as a visual preview. It is a preview of how the type looks, not a check of which font the browser used. You read the values, then click the ones you want.

Declared Stack, Not the Rendered Font

A font stack is a list of families the page asks for, in order. The first family is the one it tries first. If that one is not available, the browser moves down the list. That list is what a font-family value holds.

SuperchargeInspect shows you that list. It does not check which family the browser ended up using. So if the first family failed to load and the browser fell back to another one, the label still shows the first family. A website font finder shows you the declared value, not the rendered result.

It reads live text on the page only. It does not read fonts from images.

Copying the Font

You take the font in one of a few ways. The Family label shows the first family, and copying gives you the whole list.

The full stack is the value you actually use. Paste it into your own CSS as font-family and the browser resolves the families in the same order the page listed them.

Keyboard

Press Alt+Shift+E to start. Move between elements with the arrow keys. Hold Ctrl and press Up or Down to step to the parent or to a child. On macOS, that is Option instead of Ctrl. Press Enter to lock the element you are on, and Esc to go back to picking or close the panel. Moving to the parent or a child helps when the text sits in a small nested element that is hard to point at with the mouse.

Privacy

SuperchargeInspect makes no network calls and has no account. The stack leaves your device only when you paste it somewhere yourself.

See the colors and spacing too with the CSS inspector.