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, weight, and size the brand ships. The Brand Font Detector reads all of it from a URL. This article covers where fonts hide, what the formats mean, and how to turn a scan into the typography section of a brief.

Open the tool All insights

The redesign brief starts with the current fonts

You can't replace what you haven't 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 the whole story.

Everything you need lives in two kinds of CSS. font-family declarations tell you which faces apply to which elements, and @font-face rules tell you which files the custom faces load from. Hosted services add a third signal: a link to fonts.googleapis.com means Google Fonts, use.typekit.net means Adobe Fonts, and so on.

A full scan reads every linked stylesheet, not just the HTML, which matters because @font-face rules almost always live in a compiled CSS bundle. Ranking families by how often they're referenced then sorts the real headline and body faces above one-off decorative uses.

Web font formats you'll meet along the way

What the file extensions mean for your project.

The web font formats in an @font-face src list tell you how modern the setup is. woff2 is the current standard, compressed and universally 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 smell 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's relevant to 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.

Scan a content-heavy marketing site and a representative result looks like: Inter, Google Fonts badge, 412 uses, stack Inter, -apple-system, sans-serif. Fraunces, Google Fonts badge, 89 uses, stack Fraunces, Georgia, serif. RidgeSans, @font-face badge, 12 uses.

Read it straight off: Inter is the body face, Fraunces handles display, and RidgeSans is a custom face used sparingly, probably the wordmark. The typography tab adds the scale, 16px body at 240 declarations, 1.125rem and 1.5rem steps above it, line-height 1.5 dominant. That paragraph is your brief's current-state section, done.

Font pairing patterns worth writing down

The combination is the identity.

Individual faces matter less than the pairing, and the font pairing patterns you extract 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 the serif-over-sans pattern, that's 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 in your browser, you were looking at Arial, not the brand face.
Counting Font Awesome or Material Icons as typography; icon fonts carry glyphs, not letters.
Assuming every detected face is licensed for your client's use. Google Fonts travel freely, Adobe Fonts need an active subscription, custom faces need the foundry's paperwork.
Recording the family without its weights, then discovering the brand only licensed regular and bold.

Tips for the typography section of your brief

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

Paste the fallback stack in too. It documents what users on slow connections see, and it's the safety net your rebuild inherits on day one.

Brand Font Detector vs related tools

Typography is one leg of the teardown.

The Brand Font Detector goes deepest on type, with per-family counts and the size histograms nothing else on the site provides. The Brand Asset Pack includes a lighter fonts.txt limited to Google Fonts links, fine for a quick kit but not for a brief. Round out a full brand study with the Brand Color Extractor for the palette and the Tech Stack Detector to learn what platform the redesign will be built on.

Try it now

Open Brand Font Detector

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

Open Brand Font Detector

Write a review