How to Find What Fonts a Website Uses

Published July 20, 2026 · 5 min read · by the CSS DNA team

TL;DR: The quickest reliable answer comes from the browser's rendered styles, not the page source. Open DevTools and check font-family on an element — or use CSS DNA to see every font family, weight and the full type-size scale for the whole page in one click.

Method 1: DevTools (free, built in)

1. Right-click the text and choose Inspect.
2. In the Computed tab, find font-family, font-size and font-weight.
3. Scroll to the bottom of Chrome's Computed tab and check "Rendered Fonts" — this shows the font the browser actually used, which matters when the first family in the stack failed to load.

Limitation: you see one element at a time. Headings, body, buttons and code blocks may all differ, so mapping a site's full typography this way means a lot of clicking.

Method 2: View source / network tab

Searching the page source for font-face, fonts.googleapis.com or .woff2 reveals which font files are loaded. This is useful for discovering the foundry or service (Google Fonts, Adobe Fonts, self-hosted), but it can't tell you where each font is used, and sites often load weights they never render.

Method 3: Hover-to-identify font extensions

Classic font-detector extensions show the family of whatever text you hover. They're fine for a one-off "what's this headline?", but they stop at the family name — no weights, no sizes, no sense of the overall system.

Method 4: Extract the whole type system at once

If you want the site's typography as usable data — every family, the weights actually rendered, and the complete type-size scale — scan the rendered page instead:

1. Install CSS DNA (free, no account).
2. Open the site and click Extract.
3. Read the typography panel: font families with their weights, plus the full size scale used across the page — taken from live computed styles, so it's accurate even with minified CSS or framework class names.

Because the same scan also captures colors, spacing, shadows and gradients, you can go straight from "what font is this?" to a complete set of design tokens or a ready-to-paste Tailwind theme.

Using a found font legally

Identifying a font is free; using it isn't always. Check where it comes from:

• Google Fonts — free for commercial use; self-host or link the stylesheet.
• Adobe Fonts / commercial foundries — require a license or subscription; buy the family rather than copying the files.
• Custom brand fonts — usually proprietary. Look for the closest open alternative (many foundries publish comparisons, and Google Fonts has close matches for most popular commercial faces).