High number of distinct font families

For elements with their own text we collect the first font family in the font-family list and count how many distinct ones there are. The finding is raised above 2 (config/design.json#thresholds.maxDistinctFonts, a value marked PROPOSAL).

Only the first entry in the list is taken, not the fallbacks behind it. font-family: Inter, Arial, sans-serif therefore counts as one family (“inter”), not three.

What the check does not do: it does not distinguish weights within a family (bold and light are the same to it), it cannot tell that two names refer to the same typeface, and it does not measure how many font files are actually downloaded, which is the part that matters for speed.

The finding is page-level and informational. It costs no score at all.

For visibility in AI answers there is no effect at all. This is a finding about visual consistency and, indirectly, about speed.

The number 2 is our convention, not a standard. It comes from common practice (one typeface for headings, one for body), but three typefaces are not a defect. A design that deliberately uses three is fine; three typefaces that accumulated on a site over time are an indication.

Where the connection to something measurable lies: every family means files to download, and those block text rendering. When there are many, it shows up in LCP (SEO-20) and in text reflowing when the font arrives (SEO-21). But (and this matters) our finding does not measure that connection. It counts families, not downloaded files. A site with three families from one variable font file is better off than a site with one family in six weights.

The practical conclusion: if a high number surprises you, find out where those fonts come from. It is usually an embedded third-party component bringing its own.

Find out what is actually in use and where it comes from:

const fonts = new Set();
document.querySelectorAll('*').forEach(el => {
  const hasOwnText = [...el.childNodes].some(n => n.nodeType === 3 && n.textContent.trim());
  if (hasOwnText) fonts.add(getComputedStyle(el).fontFamily.split(',')[0].trim());
});
console.log([...fonts]);

• Consolidate to two families (headings + body), or one. Emphasis comes from weight and size, not from another typeface.
• Remove fonts that arrived with a third-party component: an embedded form, a chat widget, a player. Those are exactly the ones you do not know about.
• Download only the weights you use. Nine weights “just in case” is the commonest cause of slow text.
• Consider a variable font: one file covers the whole weight range.
• font-display: swap or optional, so text appears before the font arrives.

And the thing that matters more for fonts than their number: the fallback should have metrics similar to the web font. When character widths change on arrival, the text reflows and the page jumps. That is SEO-21, and it is more visible than a third typeface.