Fonts

Find out which fonts a website uses

Design Snap is a free Chrome extension that identifies every font used on a web page — not just the one under your cursor. It lists the custom font families, filters out generic fallbacks, and gives you the full type scale: sizes, weights and line-heights. Then it exports the typography to Tailwind, CSS variables, JSON or Figma.

Add to Chrome — it's free See PRO pricing

Rated 5.0/5 on the Chrome Web Store · read the reviews · Free plan · No account · 100% local analysis

How to identify the fonts on a website

Identifying a website's fonts takes three steps. Design Snap reads the font-family, font-size, font-weight and line-height the browser computes for every text element on the page, then groups them into a type system.

  1. Install

    Add Design Snap to Chrome from the Chrome Web Store. Free plan, no account.

  2. Extract

    Open the website and press Extract. The Typography tab lists every custom font family, with the sizes and weights the page actually uses.

  3. Inspect or export

    Hover any element with the inspector to check its computed styles, or export the whole type scale to Tailwind, CSS variables, JSON or Figma tokens.

Why a font finder should look at the whole page

Classic font identifiers work one element at a time: hover a heading, read “Inter 48px”. That answers “what is this font?” but not the question you usually have next: what is the typography system of this site? How many families, which weights, what scale from body text to hero headline.

Design Snap answers both. The inspector shows the styles of any single element on hover, and the extraction gives you the whole system at once: each family, every size on the page deduplicated into a scale (for example 12 · 14 · 16 · 20 · 24 · 32), and the weights actually in use.

Custom fonts only — no fallback noise

A font-family declaration is a stack: "Inter", system-ui, -apple-system, sans-serif. Listing every name in every stack buries the real answer. Design Snap keeps the custom families and filters out generic and system fallbacks, so the typeface that defines the brand is what you see first.

From “what font is this?” to a working type scale

Once you know the fonts, the export turns them into code: a fontFamily and fontSize block for tailwind.config.js, --font-sans CSS variables, Figma tokens, or composite typography tokens in Style Dictionary v3 (PRO).

What Design Snap does not do

It identifies fonts rendered as text on web pages. It does not recognize a font inside an image or a logo — for that, an image-based identifier that matches glyph shapes is the right tool. And it does not download font files: many web fonts are licensed, so check the foundry or Google Fonts before using one in your own project.

The whole type system, not one label

Hover-to-identify tools tell you the name of a font. Design Snap tells you how the site uses it.

  • Every custom font family on the page, fallbacks filtered out
  • Font sizes deduplicated into a type scale
  • Weights and line-heights actually used
  • Element inspector for any single element
  • Export to Tailwind, CSS variables, JSON, Figma or Style Dictionary
Design Snap docked in Chrome's side panel beside discord.com, keeping the extracted theme and tokens in view while you browse

Website font finder — FAQ

Install the Design Snap Chrome extension, open the website and press Extract. The Typography tab lists every custom font family the page uses, with sizes, weights and line-heights. To check a single element, hover it with the inspector.

No. Design Snap reads the fonts the browser uses to render text. Text baked into an image or a logo has no font information in the page, so an image-based font identifier is the better tool for that.

Design Snap does not download font files. Most web fonts are licensed; once you know the name, get it from the foundry or a library like Google Fonts under the right license.

Yes. Font identification, the inspector and the Tailwind, CSS variables, JSON and Figma exports are all in Design Snap's free plan.

WhatFont identifies the font of the element you hover. Design Snap also does that, and additionally extracts the whole typography system of the page and exports it as code. See the WhatFont alternative page for a detailed comparison.

WhatFont alternative

When WhatFont is enough, and when you need the whole type system.

Extract a design system

Colors, typography, radii, shadows and variables in one click.

Tailwind theme generator

Turn a site's fonts and colors into a tailwind.config.js.

Color palette extractor

Get any site's colors ranked by real usage.