Font Detector

Detect web fonts loaded on web pages. Identify Google Fonts, Adobe Fonts, custom @font-face, and system fonts.

What does Font Detector do?

This actor detects web fonts used on web pages. It identifies Google Fonts, Adobe Fonts (Typekit), custom @font-face declarations, and font-family CSS properties. It parses inline styles, external stylesheets, and font preloading links.

The actor loads each page, inspects all CSS sources for font declarations and font-loading links, and returns structured data about every font found including its source, format, and whether it is a Google Font, Adobe Font, or custom web font. Use it for design analysis, licensing audits, or performance optimization.

Use cases

• Design analysis -- identify fonts used on competitor websites to understand typography choices and design trends
• Font licensing -- audit web font usage across your properties to ensure compliance with font license agreements
• Performance optimization -- find unnecessary font loads that add weight and slow page rendering
• Brand consistency -- verify that correct fonts are being served across all web properties and subdomains
• Accessibility review -- check that readable, appropriately sized font families are used across your site

Why use Font Detector?

• Multi-source detection -- finds fonts from Google Fonts, Adobe Fonts (Typekit), custom @font-face, and CSS font-family declarations
• Structured output -- get clean JSON with font families, sources, formats, and classification ready for analysis
• Batch processing -- scan hundreds of URLs in a single run to audit fonts across entire websites or portfolios
• Format reporting -- identifies font file formats (woff2, woff, ttf, otf) to verify optimal delivery
• API access -- integrate font detection into design system monitoring or compliance workflows
• Pay-per-event pricing -- only pay per page analyzed with no monthly fees

Input parameters

Parameter	Type	Required	Default	Description
urls	array	Yes	--	List of web page URLs to detect fonts. Each URL is loaded and all font sources (CSS, preload links, Google Fonts API) are analyzed.

Example input

{
    "urls": [
        "https://www.google.com",
        "https://en.wikipedia.org/wiki/Web_scraping",
        "https://www.apple.com"
    ]
}

Output fields

Each URL produces one record with the following fields:

Field	Description
url	The original URL provided in the input
title	The page title
fontCount	Total number of web fonts detected
googleFontCount	Number of fonts loaded from Google Fonts
adobeFontCount	Number of fonts loaded from Adobe Fonts (Typekit)
customFontCount	Number of fonts loaded via custom @font-face declarations
fonts	Array of font objects with family, source, format, and classification flags
fontFamiliesInCss	Array of all font-family values found in CSS declarations
googleFontsUrl	The Google Fonts API URL if Google Fonts are used, null otherwise
error	Error message if analysis failed, null otherwise
checkedAt	ISO 8601 timestamp of the analysis

Output example

{
    "url": "https://www.apple.com",
    "title": "Apple",
    "fontCount": 3,
    "googleFontCount": 0,
    "adobeFontCount": 0,
    "customFontCount": 3,
    "fonts": [
        {
            "family": "SF Pro Display",
            "source": "font-face",
            "format": "woff2",
            "isGoogleFont": false,
            "isSystemFont": false
        }
    ],
    "fontFamiliesInCss": ["SF Pro Display", "SF Pro Text", "SF Mono"],
    "googleFontsUrl": null,
    "error": null,
    "checkedAt": "2026-03-01T12:00:00.000Z"
}

How to detect fonts on a website

1. Go to the Font Detector page on Apify Store.
2. Enter one or more website URLs into the URLs field.
3. Click Start and wait for the run to finish.
4. Review the results to see all fonts detected on each page, including Google Fonts, Adobe Fonts, and custom @font-face declarations.
5. Download your data in JSON, CSV, or Excel format.

How much does it cost to detect website fonts?

Font Detector uses Apify's pay-per-event pricing. You only pay for what you use.

Event	Price	Description
Start	$0.035	One-time per run
URL analyzed	$0.001	Per page analyzed

Cost examples:

• 10 pages: $0.035 + 10 x $0.001 = $0.045
• 100 pages: $0.035 + 100 x $0.001 = $0.135
• 1,000 pages: $0.035 + 1,000 x $0.001 = $1.035

Using the Apify API

You can start Font Detector programmatically using the Apify API. Replace YOUR_TOKEN with your Apify API token.

Node.js

import { ApifyClient } from 'apify-client';

const client = new ApifyClient({ token: 'YOUR_TOKEN' });
const run = await client.actor('automation-lab/font-detector').call({
    urls: ['https://www.apple.com', 'https://www.google.com'],
});
const { items } = await client.dataset(run.defaultDatasetId).listItems();
console.log(items);

Python

from apify_client import ApifyClient

client = ApifyClient('YOUR_TOKEN')
run = client.actor('automation-lab/font-detector').call(run_input={
    'urls': ['https://www.apple.com', 'https://www.google.com'],
})
items = client.dataset(run['defaultDatasetId']).list_items().items
print(items)

cURL

curl "https://api.apify.com/v2/acts/automation-lab~font-detector/runs" \
  -X POST \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -d '{"urls": ["https://www.apple.com", "https://www.google.com"]}'

Use with AI agents via MCP

Font Detector is available as a tool for AI assistants via the Model Context Protocol (MCP).

Setup for Claude Code

$claude mcp add --transport http apify "https://mcp.apify.com"

Setup for Claude Desktop, Cursor, or VS Code

{
    "mcpServers": {
        "apify": {
            "url": "https://mcp.apify.com"
        }
    }
}

Example prompts

• "What fonts does apple.com use?"
• "Detect all fonts loaded on this website"

Learn more in the Apify MCP documentation.

Integrations

Connect Font Detector with other tools using Apify integrations. Export results to Google Sheets for font inventory tracking, send Slack alerts when unauthorized fonts appear on your pages, trigger Make or Zapier workflows for licensing compliance reports, push data to n8n for custom analytics pipelines, or configure webhooks to monitor font usage after deployments.

Tips and best practices

• Check the format field to ensure fonts are served as woff2, which provides the best compression and broadest modern browser support.
• Monitor fontCount over time to catch font bloat -- too many font files slow down page rendering due to multiple network requests.
• Use googleFontsUrl to see the exact Google Fonts API call a site uses, which tells you weights and subsets being loaded.
• Compare fontFamiliesInCss with actual fonts loaded to find CSS declarations referencing fonts that are not actually loaded (fallback-only families).
• Combine with CSS Stats Analyzer to get a complete picture of both font loading and overall CSS typography patterns.

Legality

This tool analyzes publicly accessible web content. Automated analysis of public web resources is standard practice in SEO and web development. Always respect robots.txt directives and rate limits when analyzing third-party websites. For personal data processing, ensure compliance with applicable privacy regulations.

FAQ

What font sources does the actor detect? The actor detects Google Fonts (via the Google Fonts API), Adobe Fonts/Typekit, custom @font-face declarations in CSS, font preloading via link tags, and font-family properties in stylesheets.

Does the actor distinguish between loaded and declared fonts? Yes. The fonts array shows actually loaded fonts (from @font-face, Google Fonts, or Adobe Fonts), while fontFamiliesInCss shows all font-family values declared in CSS, which may include system font fallbacks not loaded as web fonts.

Can I detect system fonts used as fallbacks? The fontFamiliesInCss array includes all font-family values found in CSS, including system fonts like Arial, Helvetica, or system-ui. The isSystemFont field in the fonts array indicates whether a detected font is a system font.

The actor found zero fonts but the website clearly uses custom web fonts. Why? If fonts are loaded dynamically via JavaScript (e.g., using the CSS Font Loading API or injected stylesheet links), they may not appear in the initial HTML source that the actor parses. The actor inspects CSS from <style> blocks, <link> stylesheet references, and font preload links in the HTML. Fonts loaded entirely at runtime by JS may be missed.

fontFamiliesInCss shows fonts that are not in the fonts array. Is this normal? Yes. The fontFamiliesInCss array includes all font-family values declared in CSS, including system font fallbacks like Arial, Helvetica, or system-ui. These are not loaded as web font files, so they do not appear in the fonts array. This is expected behavior and helps you see the complete font stack.

Other SEO and website analysis tools

• Favicon Extractor — extract favicon URLs from web pages including ICO, PNG, SVG, and Apple touch icons
• Form Finder — extract and analyze HTML forms from web pages with field details
• Website Health Report — check website health including SSL, performance, and SEO basics
• Tech Stack Detector — identify technologies, frameworks, and tools used on any website