Font Detection: How We Identify Typefaces from Any URL

Why Font Detection Is Hard

Fonts are one of the most complex elements to extract from a website. Unlike colors, which are explicitly defined in CSS, fonts involve multiple layers of indirection: font-family stacks, web font loading, fallback chains, and variable font configurations.

A typical CSS font declaration might look like this:

font-family: 'Inter', -apple-system, BlinkMacSystemFont,
             'Segoe UI', Roboto, sans-serif;

The actual font rendered depends on which of these are loaded and available. Simply reading the CSS is not enough; you need to understand the full font loading pipeline.

Our Detection Pipeline

Step 1: CSS Analysis

We start by parsing all stylesheets, both linked and inline. We extract every font-family declaration and track which selectors they apply to. This gives us a map of where each font is used in the document.

We specifically look for fonts applied to:

• body and html (body font)
• h1 through h6 (heading font)
• code and pre (monospace font)
• Primary navigation and buttons (UI font)

Step 2: Web Font Source Detection

Next, we identify where web fonts are loaded from. We scan for:

Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700" rel="stylesheet">

Bunny Fonts (the privacy-friendly alternative):

<link href="https://fonts.bunny.net/css?family=Space+Grotesk:400,700" rel="stylesheet">

Self-hosted fonts via @font-face declarations:

@font-face {
  font-family: 'CustomBrand';
  src: url('/fonts/custom-brand.woff2') format('woff2');
}

Step 3: Computed Style Analysis

For the most accurate results, we check the actual computed styles of rendered elements. After the page fully loads in our headless browser, we call getComputedStyle() on key elements to see which fonts actually rendered.

This catches cases where CSS-in-JS libraries inject styles dynamically, or where font loading fails and a fallback is used.

Step 4: CDN Link Resolution

When we identify a Google Fonts or Bunny Fonts family, we generate direct CDN links that API consumers can use:

{
  "fonts": {
    "heading": {
      "family": "Space Grotesk",
      "weights": [400, 500, 700],
      "source": "bunny-fonts",
      "cdn_url": "https://fonts.bunny.net/css?family=Space+Grotesk:400,500,700"
    },
    "body": {
      "family": "Inter",
      "weights": [400, 500, 600],
      "source": "google-fonts",
      "cdn_url": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600"
    }
  }
}

Edge Cases We Handle

Variable Fonts

Variable fonts use a continuous range of weights rather than discrete values. We detect these and report the weight range:

{
  "family": "Inter",
  "variable": true,
  "weight_range": [100, 900]
}

Font Loading Failures

Some sites use font-display: swap or optional, meaning the page might render with a fallback font initially. We wait for web fonts to fully load before extracting, with a timeout of 5 seconds.

CSS-in-JS and Tailwind CSS

Modern frameworks often generate font declarations dynamically. Since we render the page in a full browser environment, we capture these computed values regardless of how they were generated.

System Font Stacks

When a site uses only system fonts (like -apple-system, BlinkMacSystemFont), we report this as a system font stack rather than a named font family. This is a valid design choice and we do not try to guess an equivalent web font.

Practical Applications

Font detection data enables several use cases:

• Design tools: automatically apply the same fonts in mockups and prototypes
• Email builders: match font styles for brand-consistent communications
• Brand audits: verify font consistency across a company's web properties
• Competitor analysis: track typography trends in your market

Accuracy and Limitations

Our font detection accuracy is above 95% for sites using standard web fonts from Google Fonts, Bunny Fonts, or Adobe Fonts. Self-hosted fonts are identified by family name but without CDN links. Sites that use image-based text or heavily obfuscated font loading may return incomplete results.

Try It Out

Curious what fonts a website uses? Create a free account and try analyzing any URL. The font data is included in every API response.