Vysoký počet různých rodin písma

Na stránce se u prvků s vlastním textem sbírá první rodina písma ze seznamu font-family a počítá se, kolik jich je různých. Nález vznikne, když je jich víc než 2: config/design.json#thresholds.maxDistinctFonts, hodnota označená PROPOSAL.

Bere se jen první položka seznamu, ne záložní písma za ní. font-family: Inter, Arial, sans-serif se tedy počítá jako jedna rodina („inter“), ne tři.

Co kontrola nedělá: nerozlišuje řezy téže rodiny (tučné a světlé je pro ni totéž), nepozná, že se dvě různá jména odkazují na totéž písmo, a neměří, kolik souborů písem se doopravdy stáhne, což je z hlediska rychlosti ta podstatnější věc.

Nález je na úrovni stránky a je informativní: skóre nesnižuje ani o bod.

Na viditelnost v odpovědích AI to nemá vliv žádný. Je to nález o vizuální konzistenci a nepřímo o rychlosti.

Číslo 2 je naše konvence, ne norma. Vychází z běžné praxe (jedno písmo na nadpisy, jedno na text), ale tři písma nejsou vada. Návrh, který vědomě používá tři, je v pořádku; tři písma, která se na webu sešla postupně, jsou příznak.

Kde je souvislost s něčím měřitelným: každá rodina písma znamená soubory ke stažení, a ty blokují vykreslení textu. Když jich je hodně, projeví se to na LCP (SEO-20) a na poskakování textu při dotažení písma (SEO-21). Ale (a to je důležité) tuhle souvislost náš nález neměří. Počítá rodiny, ne stahované soubory. Web se třemi rodinami z jednoho souboru variabilního písma je na tom líp než web s jednou rodinou v šesti řezech.

Praktický závěr: je-li vysoké číslo pro vás překvapením, podívejte se, odkud ta písma pocházejí. Bývá to vložená komponenta třetí strany, která si nese své vlastní.

Zjistěte, co se na stránce doopravdy používá a odkud to je:

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]);

• Sjednoťte rodiny na dvě (nadpisy + text), případně na jednu. Rozdíl v důrazu udělá řez a velikost, ne další písmo.
• Odstraňte písma, která přišla s komponentou třetí strany: vložený formulář, chat, přehrávač. Bývají to právě ta, o kterých nevíte.
• Stahujte jen řezy, které používáte. Devět řezů „pro jistotu“ je nejčastější příčina pomalého textu.
• Zvažte variabilní písmo: jeden soubor pokryje celou škálu tloušťek.
• font-display: swap nebo optional, ať se text zobrazí i před dotažením písma.

A věc, která u písem rozhoduje víc než jejich počet: záložní písmo má mít podobné metriky jako to vlastní. Když se po dotažení změní šířka znaků, text se přesází a stránka poskočí; to je SEO-21 a je to vidět víc než třetí rodina písma.