Find what font a website is using

See every type style on a page or in a single component, with the font the browser actually rendered, its size and weight, and a specimen drawn in that font.

What it shows

Select an element and the Typography Styles section on the Element tab lists each unique type style used by that element and the text inside it. Each style is a card with:

• The font name the browser actually used to draw the text.
• Font size and weight, for example 18px 600.
• Letter spacing and text transform, when they are set, such as 0.5px | uppercase.
• A specimen, a pangram rendered in that exact font, weight, spacing and case, so you can see the typeface, not just its name.

Styles are sorted from the largest size down, so headings come first and body and caption styles follow, which reads like a type scale.

How to identify a font

1. Open the page and start Screen Ruler by clicking its toolbar icon or pressing Alt + Shift + S (Option on a Mac).
2. Click the text you are curious about, or a wrapper around a whole section. Press Alt + Shift + ↑ to widen the selection to a parent.
3. Open Typography Styles on the Element tab.
4. Hover a card to highlight every element in the selection that uses that style.

The font that rendered, not just the font stack

CSS lists fonts as a fallback stack, for example "Brand Sans", Helvetica, Arial, sans-serif. If the first font fails to load, the browser quietly moves down the list, so the name at the front of the stack is not always what you are looking at.

Screen Ruler checks which font in the stack the text was really drawn with by measuring sample glyphs in each candidate font and matching them against the full stack. The card shows that font, and the specimen is drawn with the same settings, so what you see in the panel matches what visitors see on the page.

How styles are grouped

Two pieces of text count as the same style when they share the rendered font, size, weight, letter spacing and text transform. That means a page with dozens of paragraphs in the same body style shows one card, while a slightly heavier weight used once in a footer gets a card of its own. Hover highlighting makes those one-off styles easy to find.

Text inside web components is included, and elements that are not rendered are skipped, so the list reflects what is on screen.

Limits

• Large selections are sampled. Screen Ruler checks the first 100 elements in the selection. For a long page, select individual sections to make sure nothing is missed.
• It names fonts, it does not identify them from pixels. Text inside images, logos drawn as SVG paths or text on a canvas cannot be read. For lettering in an image, a visual font matcher is the better tool.
• Line height is not part of the card. Select a single text element to see its full computed CSS, including line-height and the complete font-family stack.
• It does not download font files. It tells you the name so you can find the font from its foundry or a font service.

When it is useful

• "What font is this?" Get the answer in a couple of clicks instead of digging through the Styles pane.
• Documenting a type scale. Select a whole page and read off every size and weight the site uses.
• Catching inconsistencies. Spot near-duplicate styles, like 15px and 16px body text, that should be one.
• Checking a fallback. See whether a custom web font loaded or the page fell back to a system font.

The guide on how to find the font a website uses walks through it step by step, and the font inspector extension roundup compares other options. Analyze Typography is part of Screen Ruler's Inspect and Studio plans, and every install starts with a free 7-day trial with everything unlocked, no card needed.

Common questions

How do I find out what font a website is using?

Activate Screen Ruler, click the text, and open Typography Styles on the Element tab. Each card shows the font that was actually rendered, with its size, weight and a specimen.

Why is the font name different from the font-family in the CSS?

font-family is a list of fallbacks. If the first font is missing or fails to load, the browser uses the next one. Screen Ruler shows the font from that list that was really used to draw the text.

Can it identify a font in an image or logo?

No. It reads the fonts the browser uses to render live text. Text baked into images, SVG paths or canvas drawings has no font information to read.

Is there a free way to check a font?

Yes. Selecting an element is free, and the free computed CSS on the Element tab shows its font-family, size and weight. The typography list with rendered font detection, specimens and hover highlighting is part of the Inspect and Studio plans.