Webové fonty jsou na většině webů pořád nejsnazší výhra ve výkonu

Vzorec, který se pořád opakuje

Když dnes zanalyzujete náhodných deset produkčních webů, na většině z nich najdete zhruba stejnou situaci s fonty:

• Šest až deset souborů fontů načtených na domovské stránce
• Všechny ve WOFF2 (dobře), ale bez strategie font-display (špatně)
• Několik tlouštěk a stylů, které se na stránce nikde nepoužívají
• Celý stack servírovaný z domény třetí strany (obvykle Google Fonts) se všemi náklady na DNS, TLS a soukromí, které z toho plynou
• Žádné ořezání pomocí unicode-range, takže každý návštěvník stahuje i cyrilici a řecké glyfy, i když je stránka anglicky

To není problém jen malých webů. Spousta dobře financovaných marketingových stránek stále načítá 600 KB fontů ještě předtím, než lze vykreslit první odstavec. Jakmile si toho vzorce začnete všímat, už ho nepřestanete vidět.

Náprava není nic exotického. Je to několik dobře známých technik, které jsou v prohlížečích už roky.

Použijte jeden proměnný font místo šesti statických

Pokud načítáte Inter Regular, Inter Medium, Inter SemiBold, Inter Bold a jejich kurzívy, stahujete zhruba šestkrát víc bajtů, než potřebujete. Jeden proměnný font Inter pokryje celou osu tloušťky (a v některých buildech i sklon) v jednom souboru, který je sotva větší než dva statické řezy.

Podpora v prohlížečích je vyřešená už roky — proměnné fonty fungují všude, kde na tom záleží. Zbývající váhání je většinou jen naučený reflex z éry statických fontů.

Praktické pravidlo: jeden soubor proměnného fontu na skript a rodinu. Latinka v jednom souboru, cyrilice v druhém, řečtina ve třetím, načítané podmíněně pomocí unicode-range. To je celé.

Nastavte rozumné font-display

Výchozí chování při načítání vlastního fontu je nezobrazit nic — neviditelný text — až po dobu tří sekund. To je nejhorší možné výchozí nastavení. Uživatelé vidí prázdnou stránku a předpokládají, že je něco rozbité.

Přidejte to do každého pravidla @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap okamžitě zobrazí záložní font a vlastní font dosadí, jakmile se načte. Uživatel může číst stránku od nulté milisekundy. Cenou je krátký posun rozložení ve chvíli výměny, který zmírníte následující technikou.

Slaďte metriky záložního fontu

Záblesk nestylovaného textu působí rušivě jen tehdy, když mají záložní a vlastní font velmi odlišné metriky. Moderní CSS to řeší pomocí size-adjust, ascent-override a souvisejících vlastností:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

S doladěnými metrikami záložního fontu je výměna sotva postřehnutelná — slova zabírají stejný vodorovný prostor před načtením vlastního fontu i po něm.

Práce Google na --allow-fallback-font-metrics je dnes součástí běžné podpory prohlížečů a existuje nástrojová pipeline (knihovna fontaine a podobné), která vám správné hodnoty spočítá během několika sekund.

Hostujte fonty sami

Google Fonts je pohodlné, zdarma a přináší dvě skutečné ceny:

1. Druhé navázání TLS. I s HTTP/3 a slučováním připojení není další origin téměř nikdy zadarmo.
2. Otázku soukromí a souladu s předpisy. Několik evropských soudů rozhodlo, že načítání Google Fonts z fonts.gstatic.com představuje předání osobních údajů (IP adresy) třetí straně. Vlastní hosting tuto otázku úplně odstraňuje.

Pipeline stažení a vlastního hostingu je:

1. Získejte soubor WOFF2 (proměnný build, pokud existuje)
2. Ořežte ho na skripty, které vaše publikum skutečně používá
3. Servírujte ho ze stejného originu jako zbytek webu, s dlouhým Cache-Control: max-age=31536000, immutable
4. Přednačtěte nejkritičtější řez: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

To je celá pipeline. U existujícího webu to zabere odpoledne a téměř nikdy se nebudete chtít vrátit zpět.

Kdy vlastní fonty úplně vynechat

Stojí za to říct nahlas: ne každý web potřebuje vlastní font. Systémový font stack je dnes opravdu krásný na každém operačním systému:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Tloušťka sedí, metriky sedí, vykreslování je vyladěné pro dané zařízení a cena v bajtech po síti je přesně nula. Pro web s nástroji, interní aplikaci, portfolio, které upřednostňuje obsah, nebo cokoli cílené na uživatele v pomalých sítích je systémový stack správná odpověď.

<!-- tool-cta:start -->

💡 Vyzkoušejte toto: Převeďte své soubory TTF nebo OTF na moderní WOFF2 s připraveným CSS pomocí Webfont Generator, což je změna formátu, kterou příspěvek doporučuje.

<!-- tool-cta:end -->

Upřímné shrnutí

U typického malého webu pokryjí celý příběh výkonu webových fontů čtyři kroky:

1. Jeden proměnný font na rodinu a skript
2. font-display: swap se sladěnými metrikami záložního fontu
3. Vlastní hosting s dlouhými cache hlavičkami a preload pro kritický řez
4. Nebo fonty úplně vynechte a použijte systémový stack

Udělejte to jednou a získáte zpět několik stovek kilobajtů z domovské stránky, vyhrajete pár stovek milisekund vnímaného výkonu a zároveň odstraníte závislost na třetí straně. Málokterá změna má lepší poměr úsilí a přínosu.