See what fonts
any website uses

The Font Scanner identifies webfonts through @font-face declarations — the CSS rule a site uses to load a font file and bind it to a family name. Each @font-face block names the family, points src at one or more font files, and states which font-weight and font-style values that file covers. The scanner parses every block it finds across the page’s stylesheets, including stylesheets pulled in through @import.

Modern sites serve webfonts almost exclusively in WOFF2 format, with WOFF as a legacy fallback; the scan report lists the formats each declaration references alongside the hosts the files are served from. A unicode-range descriptor may split one family across many @font-face blocks — one per character subset — which is why a single family can show several declarations in a report.

Static analysis has one sharp edge worth knowing: the scanner reads the CSS a server delivers, not the CSS a browser constructs afterward. Fonts attached by JavaScript at runtime never appear in a delivered stylesheet, so the report flags every stylesheet it could not fetch and lists the scan’s limitations explicitly.

The Font Scanner recognizes four hosted font providers by the hostnames in a page’s stylesheet links: Google Fonts (fonts.googleapis.com and fonts.gstatic.com), Bunny Fonts (fonts.bunny.net), Adobe Fonts (use.typekit.net), and Fontshare (api.fontshare.com). A provider match tells you where a site’s fonts are licensed and served from before you read a single @font-face rule.

Provider choice carries real consequences. Google Fonts and Bunny Fonts serve open-source families free for any use — Bunny Fonts exists specifically as a privacy-focused, GDPR-friendly mirror of the Google Fonts library. Adobe Fonts bundles licensed commercial typefaces with Creative Cloud subscriptions, so a font seen on use.typekit.net usually cannot be self-hosted for free. Fontshare distributes the Indian Type Foundry’s free catalog, including widely used families like Satoshi and General Sans.

Fonts served from the site’s own domain are classified as self-hosted. Self-hosting removes a third-party connection and gives the site full control over caching — the reason many performance-focused teams download open-source fonts and serve them alongside their other static assets.

Families the scanner classifies as system fonts ship with the operating system — no font file is downloaded at all. Georgia, Arial, Times New Roman, and the generic keywords serif, sans-serif, and monospace resolve to whatever the visitor’s OS provides, which is why system-font sites render instantly but differently on every platform.

Every font-family declaration is a ranked fallback stack: the browser tries each name left to right and uses the first family it can resolve. The scan report preserves each detected family’s fallback stack so you can see what a site actually shows when its webfont fails to load. The modern “system stack” pattern — system-ui, -apple-system, Segoe UI, Roboto, and friends chained together — deliberately targets each platform’s native interface font, and the scanner reports it like any other stack.

A stack’s composition is a design decision, not boilerplate. Pairing a webfont with a metrically similar system fallback keeps text from jumping when the webfont arrives, and choosing font-display: swap in @font-face determines whether visitors see the fallback immediately or a blank flash first.

CSS expresses font weight on a numeric scale from 100 (thin) to 900 (black), with 400 as normal and 700 as bold. The scan report splits every family’s weights into two lists: declared weights, taken from @font-face rules — the weights the site loads files for — and used weights, taken from font-weight declarations in style rules — the weights layouts actually request.

The gap between those lists is where problems hide. A weight that is used but never declared forces the browser to synthesize it, producing the smeared “faux bold” that damages otherwise careful typography. A weight that is declared but never used is dead transfer weight — a font file every visitor downloads for nothing.

Variable fonts collapse this bookkeeping into a single file: one @font-face rule can declare a weight range like 100–900, and every intermediate value renders from the same file with true drawn strokes. When a scan shows one declaration covering many used weights, a variable font is usually the reason.

The type scale section of a scan report collects every font-size declaration in a page’s CSS, converts each value to approximate pixels, and ranks the sizes by how many rules use them. The result is the site’s working typographic hierarchy — the actual sizes a design system commits to, not the ones its style guide claims.

Units tell you how a site thinks about scaling. Sizes in rem scale from the root font size and respect a visitor’s browser settings, em sizes compound from the parent element, px sizes are fixed, and clamp() expressions interpolate fluidly between a minimum and maximum as the viewport changes. A scan dominated by rem values with a 16px base is the signature of a modern, accessibility-conscious stylesheet.

Strong systems use few sizes with clear ratios — a body size around 16px, a small caption size, and a short run of heading sizes stepping up by a consistent multiplier. When a scan surfaces dozens of one-off sizes, it usually reflects accumulated drift rather than intent, and it is the first thing a typography refactor should consolidate.

Identifying a font is not the same as being licensed to use it. A scan report tells you which families a site loads and where the files come from, but every typeface carries its own license, and the delivery source is the strongest clue: families served from fonts.googleapis.com or fonts.bunny.net are open-source, while families served from use.typekit.net are commercial typefaces licensed through an Adobe Fonts subscription.

Open-source fonts overwhelmingly use one of two licenses. The SIL Open Font License permits commercial use, modification, embedding, and redistribution, with the single restriction that the fonts themselves cannot be sold standalone; the Apache 2.0 license, used by families like Roboto, is similarly permissive. The TypeSmith catalog documents free fonts, which is why scan reports can link detected families directly to downloadable profiles.

Commercial webfonts work differently: desktop, web, app, and ebook rights are usually licensed separately, and a web license is often priced by monthly pageviews. When a scan identifies a commercial typeface you cannot license, the practical path is a free alternative with matching proportions — the Font Alternatives directory exists for exactly that substitution, mapping premium families to open-source lookalikes ranked by similarity.

A scan report is the start of a research path, not its end. Every detected family that exists in the TypeSmith catalog links to a full profile — one of 8,500+ fonts documented with specimens, weight coverage, category classification, and accessibility grades — so identification flows directly into evaluation.

From a profile, the pairing directory suggests companion typefaces drawn from 29,000+ curated combinations, each pairing a display voice with a readable body family. Scanning a site whose typography you admire, then studying its families’ pairings, is the fastest way to adapt a proven system to your own work.

When a scan detects a commercial typeface, the Font Alternatives directory maps it to free, open-source lookalikes ranked by similarity, and the recommendations hub shortlists fonts for specific tools and use cases. Detection, evaluation, pairing, and licensing-safe substitution — the full decision happens without leaving TypeSmith.