Website Font Finder

Discover typography stacks, font families, weights, and web font providers used on any live webpage in real time.

Technical Architecture: Reverse-Engineering Web Typography Inspection​

Modern web typography relies on a combination of self-hosted @font-face definitions, hosted cloud font delivery networks (Google Fonts, Adobe Typekit), and local system font fallbacks.

The Website Font Finder bypasses browser CORS barriers using a serverless proxy endpoint (/api/fetchFonts) to parse linked stylesheets and extract font rules.

1. Stylesheet Scanning & @font-face AST Parsing​

The serverless function scans <link rel="stylesheet"> tags and inline <style> blocks, parsing CSS declarations to extract font family metadata:

// api/fetchFonts.js (font-face extraction)
function parseFontFaceRules(cssText) {
  const fontFaces = [];
  const fontFaceRegex = /@font-face\s*\{([^}]+)\}/gi;
  let match;

  while ((match = fontFaceRegex.exec(cssText)) !== null) {
    const block = match[1];
    const familyMatch = block.match(/font-family\s*:\s*['"]?([^'";]+)['"]?/i);
    const weightMatch = block.match(/font-weight\s*:\s*([^;]+)/i);
    const styleMatch = block.match(/font-style\s*:\s*([^;]+)/i);
    const srcMatch = block.match(/src\s*:\s*([^;]+)/i);

    if (familyMatch) {
      fontFaces.push({
        family: familyMatch[1].trim(),
        weight: weightMatch ? weightMatch[1].trim() : '400',
        style: styleMatch ? styleMatch[1].trim() : 'normal',
        src: srcMatch ? srcMatch[1].trim() : null
      });
    }
  }

  return fontFaces;
}

2. Provider Resolution: Google Fonts & Adobe Typekit​

In addition to static CSS, the parser inspects external stylesheet links to identify managed font delivery services:

function extractFontProviders(html, $) {
  const providers = [];

  // Google Fonts API v2: fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap
  $('link[href*="fonts.googleapis.com"]').each((_, el) => {
    const href = $(el).attr('href') || '';
    const url = new URL(href, 'https://fonts.googleapis.com');
    const families = url.searchParams.getAll('family');
    providers.push({ provider: 'Google Fonts', families });
  });

  // Adobe Fonts / Typekit: use.typekit.net/xxxx.css
  $('link[href*="use.typekit.net"]').each((_, el) => {
    const href = $(el).attr('href') || '';
    providers.push({ provider: 'Adobe Typekit', stylesheet: href });
  });

  return providers;
}

3. Web Font Formats & Performance Reference​

Optimal font-display Strategies​

• font-display: swap: Renders fallback system text immediately until the web font finishes loading, eliminating FOIT (Flash of Invisible Text).
• font-display: optional: Grants the browser a strict 100ms budget to load the webfont; if delayed, the fallback font is used permanently for that pageview to protect Core Web Vitals (CLS/LCP).

4. Client-Side Security & Proxy Data Guarantee​

• No Session Storage: Stylesheets and target pages are evaluated in memory and discarded upon response transmission.
• Respects CORS Standards: Font files themselves are inspected for descriptive headers and not persisted on local disks.
• SSRF Shield: Blocks requests targeting internal private addresses and loopback interfaces.

Related Tools​

Related Posts​

Markdown Reference Cheatsheet 2025

Markdown is a lightweight markup language that allows you to format plain text. It is widely used for documentation, writing articles, and creating web content.

Understanding Off-by-One Errors in JavaScript

A guide for senior developers on identifying and avoiding off-by-one errors in JavaScript with practical code examples.

Check History of a Specific Line in VS Code

You can check the history of a specific line in VS Code using the built-in features or the specific view. You can also install the free extension.