How to use
01
Paste the URL and click Detect fonts
The tool fetches the HTML and every linked stylesheet, then parses the CSS rules. Expect 5 to 20 seconds depending on how many stylesheets the site loads; a note shows progress while it scans.
02
Read the ranked font list
Each family shows a source badge such as Google Fonts, Adobe Fonts, or @font-face, its usage count, a rendered preview, and the complete fallback stack. Icon fonts are filtered into their own tab.
03
Open the Typography tab
Font-size and line-height histograms show every declared value with a pixel equivalent and a usage bar, giving you the site's type scale. Copy any family name with its copy button.
Why Brand Font Detector
- Reads every linked stylesheet, not just the page HTML, so custom @font-face declarations are detected.
- Identifies Google Fonts, Adobe (Typekit), Bunny Fonts, Fontshare, and Font Awesome.
- Ranks fonts by CSS usage count so the headline + body fonts surface first.
- Shows the full fallback stack as authored in the CSS.
- Also surfaces font-size and line-height histograms (typography tab).
Common questions
Which font sources can the Brand Font Detector identify?
It recognizes Google Fonts, Adobe Fonts (Typekit), Bunny Fonts, Fontshare, and Font Awesome by their loading patterns, and it flags self-hosted families found in @font-face rules. Anything else declared only in font-family stacks gets a plain CSS badge, so every family still ends up labeled.
Can I detect fonts from URL input without opening the site?
Yes, that's the whole workflow: paste the address, click Detect fonts, and the scan runs server-side. There's no browser extension to install and no need to poke through devtools computed styles by hand.
Why are icon fonts split away from the text fonts?
Families like Font Awesome, Material Icons, IcoMoon, and Glyphicons are glyph sets, not typography, and they'd clutter the ranking. The detector moves them to a separate Icon fonts tab so the families that actually shape the brand's look surface first.
Does the font report include fallback stacks?
It shows the full stack exactly as written in the CSS, for example Inter, -apple-system, sans-serif. That matters for a redesign brief because the fallback is what a chunk of users see when the webfont fails or is still loading.
How are the detected fonts ordered?
By CSS usage count, with the count printed next to each family. The most-declared faces are almost always the body and headline fonts, so the top two rows usually answer the pairing question on their own.
What does the Typography tab tell me beyond font names?
It lists every font-size declaration with an approximate pixel value and every line-height, each with a usage bar. That's effectively the site's type scale, which is the part of a typography audit that font-name lookups always miss.