Wayfern
Start building Sign in

Get brand, styleguide and font data from a site

Detect the fonts a website uses, read its brand colors, logos and links, and get its type scale and design tokens with the brand, styleguide and fonts APIs.

Updated

Three endpoints describe how a site looks and who it says it is. brand returns the brand profile, styleguide returns the visual system and fonts returns every font family the page uses. This guide shows what each one returns and what it costs.

Make a request

All three take the same body. Only url is required.

curl -X POST https://api.wayfern.com/api/v1/fonts \
  -H "Authorization: Bearer $WAYFERN_API_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{ "url": "https://example.com", "waitFor": 1500 }'
EndpointCreditsReturns
POST /api/v1/brand10 per profileName, contact data, colors, logos and links
POST /api/v1/styleguide10 per siteColors by role, type scale, radii, shadows, spacing, breakpoints, CSS variables
POST /api/v1/fonts5 per siteFont families with their source, weights, files and use

These endpoints also take proxy, country, timeout, waitFor and headers. The default timeout is 45 seconds. Each route allows 30 requests a minute.

Each call loads the page once with images, fonts and stylesheets. It waits for the network to go quiet, up to 8 seconds, and samples the computed styles of the live page. There is no cache for these reports, so each call loads the page and is billed. A failed call costs nothing. For a client-rendered site, add waitFor in milliseconds.

Brand profile

data has these fields:

  • domain, url, name and legalName
  • description, slogan, industry and founded
  • email, phone and address
  • colors.primary and colors.palette. Each palette color has hex, source and weight.
  • logos, each with url, type, format, width, height and variant. type is icon, logo, og-image, apple-touch-icon, mask-icon or manifest-icon.
  • links.social, keyed by network, and links.site for pages such as pricing or docs
  • metadata, the same page metadata a scrape returns

A color source is theme-color, manifest, css-variable or computed. For computed colors, weight is the number of sampled elements that use the color. A declared color has weight 0. Use source to tell a declared brand color from a color that is only common on the page.

Wayfern also reads the web app manifest. When the markup has no description, industry or slogan, a language model fills them from the page text, if it is available. It never replaces a value that the markup declares.

Styleguide

data has these fields:

  • colors.palette, plus colors.text, colors.background and colors.accent. Accent colors are the colors of links and buttons.
  • typography.families, each with family, stack, count and role. role is heading, body, mono or ui.
  • typography.scale, each size with its count and the lineHeight and weight most often used with it
  • typography.weights, typography.lineHeights and typography.letterSpacings
  • radii from small to large, shadows from most used, and spacing from small to large
  • breakpoints, the min-width media queries in the site’s own CSS
  • cssVariables, the custom properties on :root
  • sources, the stylesheets the report used, with url, bytes and inline

The report comes from the stylesheets the page loaded and from the live page, so it describes what renders.

Fonts

Use /api/v1/fonts to detect the fonts a website uses. Each entry in data.fonts has:

  • family and source. source is google, adobe, bunny, fontshare, self-hosted, third-party or system.
  • host, the host that serves the files, or null for a system font
  • weights, styles and formats
  • files, the font files the page downloaded, each with url, format and bytes
  • display, the font-display value, and unicodeRanges
  • usage, with elementCount, sampleSelector, heading and body. heading is true when an h1, h2 or h3 uses the family.

data.totalBytes is the total size of the font files the page downloaded.

const res = await fetch("https://api.wayfern.com/api/v1/fonts", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.WAYFERN_API_TOKEN}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ url: "https://example.com" }),
});
const body = await res.json();
if (!res.ok) throw new Error(`${body.error}: ${body.message}`);

for (const font of body.data.fonts) {
  const where = font.usage.heading && font.usage.body ? "headings and body" : font.usage.heading ? "headings" : "body";
  console.log(`${font.family} (${font.source}) ${font.weights.join("/")} for ${where}`);
}
console.log(`${body.data.totalBytes} bytes of web fonts, ${body.credits} credits`);

Costs and limits

Residential bandwidth, when used, costs 320 credits per GB on top of the report rate. These pages load images and fonts, so a residential exit uses more bytes than a scrape. See Pricing and the references for Brand profile, Styleguide and Fonts.

Related guides