DEV Community

Cover image for I ran my own tool against 100 sites. 1 in 5 returned the wrong primary font.
Yuvraj Angad Singh
Yuvraj Angad Singh

Posted on

I ran my own tool against 100 sites. 1 in 5 returned the wrong primary font.

#webdev #ai #opensource #tooling

I built brandmd 6 months ago. It is an npm CLI that extracts any website's design system into a DESIGN.md file. The idea: drop the file in your project root, AI coding agents (Claude Code, Cursor, Gemini CLI, Stitch) read it, and they generate on-brand UI instead of generic shadcn-default.

It was working. Stripe, GitHub, Vercel, Linear — primary fonts came back correct. Then a user DMd me last week.

"your tool says my primary font is Inter. it is actually Manrope. the brand is on the hero, not the paragraphs."

Fair. So I ran brandmd against 100 popular design system sites to see how widespread the bug was.

The result

9 of 45 successfully-extracted sites returned the wrong Primary font. 20%.

Site brandmd said Reality
mantine.dev Menlo Outfit
remix.run JetBrains Mono Inter Variable
neon.tech GeistMono Inter
valura.ai Inter Manrope
railway.app Inter IBM Plex Serif (on the hero)
resend.com inter aBCFavorit
svelte.dev Georgia DM Serif Display
workday.design Times (no real brand font, fallback)
htmx.org Times (intentionally minimal)

Three different failure modes:

  1. Code fonts winning. mantine and remix had so much code on their homepage that JetBrains Mono / Menlo dominated the font frequency count.
  2. Body text drowning the brand. valura uses Inter on 737 elements (utility), Manrope on 28 (hero). Frequency rank picks Inter.
  3. Fallback Times. Sites with no custom font load Playwright's default fallback. Old logic surfaced Times as Primary.

Root cause 

// analyze.js, v0.7.2
const primaryFont = fontList[0]?.[0];
Enter fullscreen mode Exit fullscreen mode

That was it. Primary was just the most-frequent font across all DOM elements. Body text always wins.

The fix (v0.8, just shipped) 

// analyze.js, v0.8
const primaryFont =
  pickNonExcluded(displayFonts) ||  // fontSize >= 40px (hero)
  pickNonExcluded(headingFonts) ||  // h1-h6
  pickNonExcluded(bodyFonts) ||     // p, li, span, div
  fontList[0]?.[0];

// excluded from Primary: mono fonts (Menlo, JetBrains Mono, GeistMono, etc.),
// default fallbacks (Times, Arial, Georgia), icon fonts (Material Icons,
// Font Awesome, Heroicons).
Enter fullscreen mode Exit fullscreen mode

Three principles:

  1. Display first. The hero font is the brand font. fontSize >= 40px is where the brand lives, not in h2/h3 subtitles.
  2. Skip mono. Code fonts can win Secondary slot, never Primary. mantine.dev wants Outfit on top, JetBrains Mono in code blocks.
  3. Skip fallbacks. If the site has no real custom font, surfacing Times honestly is fine. But if there ARE real fonts available, use those.

Also shipped:

  • Quote-aware font-family parser (handles var(--font, 'Inter') and backslash escapes that v0.7.2 split incorrectly)
  • Per-role cascade (heading falls back to display falls back to body)
  • Navigation timeout 30s → 45s for slow SPAs

Results

7 of 9 wrong-Primary cases now report the correct brand font. The remaining 2 (railway.app, workday.design) genuinely have no distinct brand font on the hero, so the output is honest.

Install 

npm i brandmd
# or run without install
npx brandmd https://your-site.com
Enter fullscreen mode Exit fullscreen mode

Repo: github.com/yuvrajangadsingh/brandmd

If brandmd saved you time, star the repo — it helps other devs find it.

Top comments (0)