What Font Is That Website Using? 5 Ways to Find Out

Published July 20, 2026 · Updated August 17, 2026 · 9 min read · by the CSS DNA team

Quick answer: Right-click the text, choose Inspect, open the Computed tab and scroll to Rendered Fonts at the bottom. That shows the font the browser actually drew, which is not always the first name in the CSS. For the whole page at once — every family, the weights really in use, and the complete size scale — CSS DNA returns it in one click.

Which method should you use?

Method 1: DevTools — read the rendered font, not the declared one

This is the only free method that is always correct, because it reports what the browser painted rather than what the stylesheet asked for.

1. Right-click the text you care about and choose Inspect (or press F12 / ⌥⌘I).
2. Open the Computed tab in the styles pane.
3. Read font-family, font-size, font-weight, line-height and letter-spacing.
4. Scroll to the very bottom of the Computed tab and find the Rendered Fonts section. Chrome lists the typeface actually used, its source (a network resource, a local file, or a system fallback) and the glyph count.

That last step is the one most guides skip, and it is the one that matters. font-family: "Söhne", Helvetica, Arial, sans-serif tells you what the site wanted. If the licensed webfont failed to load, or the visitor's region cannot reach the font CDN, Rendered Fonts will honestly say Arial.

In Firefox and Safari

• Firefox has a dedicated Fonts tab in the Inspector — arguably better than Chrome's. It lists every font used on the page, with live sliders for variable-font axes like weight and optical size.
• Safari — enable the Develop menu in Settings → Advanced, then Inspect and read the Computed pane. Safari has no rendered-font readout, so cross-check against the Network tab for .woff2 requests.

Method 2: A one-line console snippet that lists every font on the page

DevTools shows one element at a time. To get the full set in a single step, paste this into the Console:

[...new Set([...document.querySelectorAll('body *')]
  .map(el => getComputedStyle(el).fontFamily))]
  .sort()

That returns every distinct font-family stack on the page. To see which families the browser actually downloaded — with their weights and styles — use the Font Loading API instead:

[...document.fonts].map(f => f.family + ' ' + f.weight + ' ' + f.style)

And for the type scale — the set of sizes the design really uses — this groups every size by how often it appears:

[...document.querySelectorAll('body *')]
  .map(el => getComputedStyle(el).fontSize)
  .reduce((a, s) => (a[s] = (a[s] || 0) + 1, a), {})

Method 3: Hover-to-identify extensions

The classic point-and-shoot answer. You install one, hover over text, and a tooltip names the font.

These are excellent for a one-off "what's this headline?" and poor for mapping a design. Most stop at the family name, so you still do not know which weights the site actually ships, or how many distinct sizes the type scale contains. We compare the broader field in our CSS inspector extension comparison.

Method 4: View source and the Network tab — find where the font comes from

Knowing the name is half the job. Knowing the source tells you whether you can use it. Open DevTools → Network, filter to Font, and reload. Or search the page source (⌘U / Ctrl+U) for @font-face, fonts.googleapis.com, use.typekit.net or .woff2.

Limitation: the Network tab shows which font files loaded, not where each one is used, and sites routinely load weights they never render. It also cannot tell you the type scale.

Method 5: Extract the whole type system at once

If the reason you are asking is that you want to rebuild the typography rather than just name it, you need families, the weights actually rendered, and the complete size scale as data.

1. Install CSS DNA — free, no account.
2. Open the site and click Extract.
3. Read the typography panel: every family with the weights in use, plus the full size scale, taken from live computed styles — so it stays accurate even when the CSS is minified or the class names are framework-generated.

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

How to identify a font from an image or screenshot

None of the above works when the type is baked into a JPEG, a logo, or a video frame — there is no CSS to read. For that, use image matching:

• WhatTheFont (MyFonts) — upload the image, crop to a word, and it returns ranked commercial matches. The strongest of the three.
• Font Squirrel Matcherator — similar, and better at surfacing free lookalikes.
• Adobe Capture — point a phone camera at printed or on-screen type and it matches against the Adobe Fonts library.

All three want high contrast, a horizontal baseline and separated letterforms. Crop tightly to four to eight characters, straighten any rotation, and expect poor results from script faces with connected strokes.

Why the font you found isn't always the font you see

• The stack fell through. The first family failed to load and you are looking at a system fallback. Rendered Fonts is the only readout that tells you this.
• It's a variable font. One file, many weights. font-weight: 620 is legitimate here, and no static weight will reproduce it exactly.
• It's an icon font. Families like Material Icons or Font Awesome show up in the list but carry no readable text.
• The text is inside an image or SVG. Computed styles return nothing — use image matching above.
• The heading is a different family from the body. Checking a single element is the most common way people get this wrong. Sample a heading, a paragraph, a button and a code block before concluding.

Finding a free alternative to a licensed font

Identifying a font is free; using it is not always. If the site runs a commercial face you cannot license, these are the usual open substitutes:

Match the metrics, not just the shapes: x-height, cap height and default letter-spacing decide whether a substitution reads like the original at body sizes. Swapping a high x-height face for a low one changes the texture of the whole page even when the letterforms look close.

On a phone

iOS Safari and Android Chrome have no inspector, so you have two options: request the desktop site and use a desktop browser instead, or screenshot the text and run it through WhatTheFont. Remote debugging works too — Safari on macOS can inspect an iPhone over USB, and chrome://inspect does the same for Android.