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 much does it cost?

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)

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.

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.