How to Detect What Fonts a Website Uses

February 17, 2026 · 6 min read

You found a beautiful website and you need to know what fonts it uses. Maybe you're redesigning your own site, auditing a client's typography, or building a tool that analyzes web design. Whatever the reason, identifying website fonts programmatically is surprisingly tricky.

Browser DevTools can show you computed styles one element at a time, but that's slow and manual. Browser extensions like WhatFont work for casual use but can't be automated. And neither approach tells you about font-loading performance, fallback chains, or whether the site is using Google Fonts vs self-hosted files.

In this guide, we'll cover three approaches: manual inspection, building your own detector with Puppeteer, and using the FontSpy API to get comprehensive font data from any URL in one request.

The Manual Approach: Browser DevTools

Right-click any text element, choose "Inspect," and look at the Computed tab. You'll see font-family, font-weight, and font-size for that specific element. The "Rendered Fonts" section at the bottom shows which font file was actually used (important when fallbacks are involved).

This works fine for checking one or two elements. It falls apart when you need to audit an entire page, compare fonts across pages, or automate the process for hundreds of URLs.

The DIY Approach: Puppeteer + JavaScript

You can build a font detector using headless Chrome. The idea: load the page, query all text elements, and read their computed font properties.

const puppeteer = require('puppeteer');

async function detectFonts(url) {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle0' });

  const fonts = await page.evaluate(() => {
    const elements = document.querySelectorAll('*');
    const fontMap = new Map();

    elements.forEach(el => {
      const text = el.textContent?.trim();
      if (!text) return;

      const style = window.getComputedStyle(el);
      const family = style.fontFamily;
      const weight = style.fontWeight;
      const size = style.fontSize;

      const key = `${family}|${weight}`;
      if (!fontMap.has(key)) {
        fontMap.set(key, {
          family, weight, size,
          elements: 0
        });
      }
      fontMap.get(key).elements++;
    });

    return Array.from(fontMap.values());
  });

  await browser.close();
  return fonts;
}

This gets you basic results, but misses a lot: Google Fonts detection, font file URLs, performance metrics, CSS @font-face declarations, font-display behavior, and fallback chain analysis. Building all of that is a significant project.

The API Approach: FontSpy

FontSpy handles all the complexity. One API call returns every font on the page, including metadata you'd spend hours collecting manually.

curl "https://fontspy.grabshot.dev/v1/detect?url=https://stripe.com" \
  -H "X-Api-Key: fs_your_key_here"

The response includes:

Font families with weights, sizes, and element counts
Google Fonts detection with exact stylesheet URLs
Font file URLs (woff2, woff, ttf sources)
CSS @font-face rules parsed from stylesheets
Performance score with actionable issues (font-display missing, too many font files, render-blocking loads)
System vs web font classification

Node.js Example

const response = await fetch(
  'https://fontspy.grabshot.dev/v1/detect?url=https://example.com',
  { headers: { 'X-Api-Key': 'fs_your_key' } }
);

const data = await response.json();

// List all font families used
data.fonts.forEach(f => {
  console.log(`${f.family} (${f.weight}) - ${f.elements} elements`);
});

// Check performance
console.log(`Font performance score: ${data.performance.score}/100`);
data.performance.issues.forEach(i => console.log(`  - ${i}`));

Python Example

import requests

resp = requests.get(
    "https://fontspy.grabshot.dev/v1/detect",
    params={"url": "https://example.com"},
    headers={"X-Api-Key": "fs_your_key"}
)

data = resp.json()
for font in data["fonts"]:
    print(f"{font['family']} ({font['weight']}) - {font['elements']} elements")

Try FontSpy Free

Detect fonts on any website. 50 free requests per month, no credit card required.

Get Your API Key

Common Use Cases

Design System Audits

Scan your entire site to make sure every page uses the approved font stack. FontSpy catches rogue fonts that snuck in through third-party widgets, embedded content, or legacy pages.

Competitive Analysis

Curious what fonts successful competitors use? Run their URLs through FontSpy and build a typography mood board in minutes instead of hours.

Font Performance Optimization

Web fonts are one of the top causes of layout shift (CLS). FontSpy's performance scoring identifies missing font-display declarations, too many font files, and render-blocking font loads that hurt your Core Web Vitals.

Brand Monitoring

Agencies managing multiple client sites can automate font compliance checks. Set up a weekly scan to verify brand fonts are consistently applied.

Which Approach Should You Use?

DevTools is fine for quick, one-off checks when you're browsing and get curious about a font.

DIY Puppeteer works if you only need basic font-family detection and have time to maintain the infrastructure.

FontSpy API makes sense when you need comprehensive data (Google Fonts, performance, font files), when you're scanning many URLs, or when you want to integrate font detection into your own tools.

Wrapping Up

Font detection sounds simple until you try to do it comprehensively. Between fallback chains, Google Fonts stylesheets, @font-face declarations, and performance implications, there's a lot more to it than reading font-family from computed styles.

If you're building tools that need font data, or you're doing regular typography audits, give FontSpy a try. The free tier is generous enough for most use cases.

GrabShot Blog