Back to Blog
Guide

Find Fonts Used on Any Website

January 25, 20269 min read

"What font is that?" — Every designer has asked this question. Whether you're researching competitors, matching a client's existing brand, or simply curious about beautiful typography, knowing how to extract fonts from websites is a crucial skill.

Why Typography Extraction Matters

  • ✏️
    Design Consistency — Use the same fonts across web and print materials
  • 🔍
    Competitive Research — Understand typography choices of successful brands
  • 💰
    Client Work — Match existing brand typography without asking for assets
  • 📏
    Type Scale Learning — See how professionals create visual hierarchy

What Makes a Complete Typography System?

A font name alone isn't enough. Complete typography extraction includes:

  • 1
    Font Families — Primary, secondary, and monospace fonts
  • 2
    Font Weights — 300, 400, 500, 600, 700, etc.
  • 3
    Font Sizes — The complete type scale (12px to 72px+)
  • 4
    Line Heights — Spacing between lines for readability
  • 5
    Letter Spacing — Tracking used for headings and body
  • 6
    Font Sources — Google Fonts, Adobe, or self-hosted

Method 1: Browser Extensions (WhatFont, Fontface Ninja)

The most popular approach. Click an element to see its font:

  • • WhatFont — Shows family, weight, size on hover
  • • Fontface Ninja — Adds font preview and purchase links
  • • Fonts Ninja — Chrome extension with download options

⚠️ Limitations:

  • • One element at a time — Tedious for full type scale
  • • No export — No Tailwind/CSS output
  • • Misses @font-face — Custom fonts often undetected
  • • No typography scale — Just individual values

Method 2: Browser DevTools (Manual)

For developers comfortable with CSS inspection:

  1. 1. Right-click any text → "Inspect"
  2. 2. In Styles panel, find font-family
  3. 3. Check font-weight, font-size, line-height
  4. 4. For Google Fonts: Network tab → filter "fonts.googleapis"
  5. 5. For @font-face: Sources tab → look for .woff2 files

The Problem

This takes 15-30 minutes per site. You'll miss fonts used in hover states, modals, and dynamically loaded content. And there's no export—you have to manually create your config files.

Method 3: Automated Extraction (Best)

Tools like BrandSpy crawl the entire page and extract typography programmatically:

What BrandSpy extracts:

  • All font families (including fallbacks)
  • Complete weight range (100-900)
  • Full type scale with all sizes
  • Line heights per element type
  • Letter spacing values
  • Font sources (Google, Adobe, custom)
  • Typography hierarchy (H1-H6, body, caption)

Font Source Detection

BrandSpy identifies where fonts come from—critical for licensing:

🌐

Google Fonts

Free to use commercially

🅰️

Adobe Fonts

Requires subscription

📁

Self-Hosted

Check license before use

Export to Your Stack

Once extracted, BrandSpy exports typography to multiple formats:

Tailwind Config

fontFamily: { sans: ['Inter', ...] }

CSS Variables

--font-primary: 'Inter';

CSS Variables

$font-primary: 'Inter';

Design Tokens

Standard JSON format

Tool Comparison

FeatureWhatFontDevToolsBrandSpy
Time needed5 min20 min10 sec
Full type scalePartial
Font sources
Export to Tailwind
Line heights

Frequently Asked Questions

Can I legally use fonts I find on websites?

It depends on the license. Google Fonts are free. Adobe Fonts require subscription. Premium fonts (Helvetica, etc.) require purchase. BrandSpy shows the font source so you can check licensing.

What if the site uses custom/obscure fonts?

BrandSpy detects @font-face declarations and shows the font family name. For truly custom fonts, you may not be able to get the files, but you can find similar alternatives.

Does it work with web fonts loaded via JavaScript?

Yes! BrandSpy uses a headless browser that renders the full page, including fonts loaded via JavaScript, CSS-in-JS, and font-loading APIs.

Can I extract colors too?

Yes. BrandSpy extracts complete design systems. See our color extraction guide.

Related Guides

Extract Typography in Seconds

Stop clicking on every element. Get complete typography systems with fonts, weights, and scales—exported to Tailwind.

Try Design Analyzer →

Advanced 2026 Analysis 🚀

Beyond basic extraction, BrandSpy now features an advanced mathematical heuristic engine:

  • • APCA Contrast: Checks colors against the new WCAG 3.0 advanced perceptual contrast algorithm.
  • • Color Blindness Simulation: Verifies palettes against Protanopia and Deuteranopia matrices.
  • • Typography Scales: Mathematically detects geometric growth ratios (e.g., Major Third, Golden Ratio).
  • • Grid Compliance: Calculates the percentage of margins/paddings that obey strict 8-point grid rules.

You can analyze any website for free to see the math behind the design.