Brand Extractors·4 min read

Identifying Fonts on Any Site for a Redesign Brief

Typography is the first thing a redesign changes and the last thing anyone documents. Before you propose new type, the brief has to name the old type, and identifying fonts on any site is quicker than most designers assume: the CSS spells out every family and size the brand ships. The Website Font Detector reads it from a URL. This article covers where fonts are declared, what the scan can and cannot tell you, and how to turn it into the typography section of a brief.

Open the free Website Font Detector All insights

The redesign brief starts with the current fonts

You cannot replace what you have not named.

A typical kickoff conversation: the client says the site feels dated, the designer asks what typeface it uses, and nobody in the room knows. The current fonts anchor everything that follows, licensing costs, how radical the new direction reads, whether headings and body need separate treatment, so the brief has to pin them down first.

Guessing from a screenshot fails more than it works, because dozens of grotesques look identical at body sizes. The stylesheet, on the other hand, states the family name outright.

Identifying fonts on any site from its CSS

Two declarations tell most of the story.

The facts live in two kinds of CSS. font-family declarations say which faces apply, and @font-face rules say which files custom faces load from. Hosted services add a third signal in their stylesheet links. The detector reads the page HTML and up to 25 linked stylesheets, then labels each family with its source: Google Fonts, Adobe Fonts, Bunny Fonts, Fontshare or Font Awesome, with everything else, including self-hosted faces, marked CSS.

Families are ranked by how often they appear, which pushes the real body and heading faces above one-off decorative uses. The Where each font is used table then maps the CSS rules for body text, headings, buttons and code to a font, weight and size; confirm one heading in your browser's inspector when a site styles text with JavaScript. Fonts injected by JavaScript after load and stylesheets pulled in with @import are not read.

What the font files tell you

Worth a look in DevTools.

The detector lists families, not files, so open the @font-face rules in DevTools when the format matters. woff2 is the current standard, compressed and widely supported; plain woff signals an older build; ttf or otf files served raw usually mean someone uploaded desktop fonts without converting them, which is a licensing question worth noting in the brief.

A single file covering weights from 100 to 900 is a variable font, increasingly common with faces like Inter. That matters for your redesign budget: one variable file can replace six static weights and simplify whatever type system you propose next.

A worked font detection

From URL to type inventory.

Click Detect fonts on a content-heavy marketing site and a representative Fonts tab reads: Inter, Google Fonts, 412 uses, stack Inter, -apple-system, sans-serif. Fraunces, Google Fonts, 89 uses, stack Fraunces, Georgia, serif. RidgeSans, CSS, 12 uses. Font Awesome sits in its own Icon fonts tab, out of the way.

Read it straight off: Inter is almost certainly the body face, Fraunces handles display, and RidgeSans is a custom face used sparingly, probably the wordmark. Type the client's headline into Preview text to see it set in each Google font; custom faces only preview if they are installed on your machine. The Typography tab adds the scale, every font-size with an approximate pixel value and every line-height, each with a usage bar. That is your brief's current-state section, nearly done.

Pairings worth writing down

The combination is the identity.

Individual faces matter less than the pairing, and the combinations you record from competitors are free strategy research. A serif display over a neutral sans body reads editorial and premium. Two weights of a single sans reads product-led and Swiss. A monospace accent face signals developer tooling almost by itself.

When you scan five sites in a category and four run serif over sans, that is a documented convention your redesign can either join or deliberately break. Either way, the brief should say which, and why.

Mistakes people make identifying fonts

The common traps are all avoidable once you know they exist.

Identifying the fallback by accident: if the webfont failed to load, or is not installed for the preview, you were looking at Arial, not the brand face.
Counting icon fonts as typography; Font Awesome and Material Icons carry symbols, which is why the tool moves them to their own tab.
Assuming every detected face is licensed for your client's use. Google Fonts use open licenses, Adobe Fonts need an active subscription, custom faces need the foundry's paperwork.
Recording the family without its weights. The scan lists families, so check the weights in DevTools or the font service link before the brief goes out.

Tips for the typography section of your brief

Capture three things per family: the name with its source, the weights actually used, and the sizes it appears at. That is the difference between a brief that says they use Inter and one that says they run Inter 400 and 600 on a 16px base.

Copy the fallback stack in too; the CSS button on each family copies the full font-family declaration. It documents what users on slow connections see, and it is the safety net your rebuild inherits on day one.

Website Font Detector vs related tools

Typography is one leg of the teardown.

The Website Font Detector goes deepest on type, with per-family counts, fallback stacks and the size and line-height lists. The Brand Asset Pack Downloader includes a lighter fonts.txt that lists families and sources, fine for a quick kit but not for a brief. Round out a full brand study with the Website Color Extractor for the palette and the Tech Stack Detector to learn what platform the redesign will be built on.

Try it now

Open Website Font Detector

The tool is one click away. No sign up, no upload, no payment.

Open Website Font Detector

Write a review