Webové fonty sú na väčšine webov stále najjednoduchšou výkonnostnou výhrou

Vzor, ktorý sa opakuje

Ak dnes zauditujete náhodných desať produkčných webov, na väčšine z nich nájdete približne rovnakú situáciu s fontmi:

• Šesť až desať súborov fontov načítaných na domovskej stránke
• Všetky vo WOFF2 (dobré), ale bez stratégie font-display (zlé)
• Niekoľko rezov a štýlov, ktoré sa nikde na stránke nepoužívajú
• Celý stack servírovaný z domény tretej strany (zvyčajne Google Fonts) so všetkými nákladmi na DNS, TLS a súkromie, ktoré z toho vyplývajú
• Žiadne subsetovanie cez unicode-range, takže každý návštevník sťahuje aj cyriliku a grécke glyfy, aj keď je stránka po anglicky

Toto nie je problém výhradne malých webov. Množstvo dobre financovaných marketingových stránok stále načítava 600 KB fontov skôr, než sa dá vykresliť prvý odsek. Keď si tento vzor začnete všímať, už ho neprestanete vidieť.

Riešenie nie je exotické. Je to niekoľko dobre známych techník, ktoré sú v prehliadačoch roky.

Použite jeden variabilný font namiesto šiestich statických

Ak načítavate Inter Regular, Inter Medium, Inter SemiBold, Inter Bold a ich kurzívy, sťahujete približne šesťkrát viac bajtov, než potrebujete. Jeden variabilný font Inter pokryje celú os hrúbky (a v niektorých zostaveniach aj sklon) v jednom súbore, ktorý je len o málo väčší než dva statické rezy.

Podpora v prehliadačoch je už roky vyriešená — variabilné fonty fungujú všade, kde na tom záleží. Zvyšná váhavosť je väčšinou len zdedený návyk z éry statických fontov.

Praktické pravidlo: jeden súbor variabilného fontu na skript a rodinu. Latinka v jednom súbore, cyrilika v druhom, gréčtina v treťom, načítané podmienečne cez unicode-range. To je všetko.

Nastavte rozumné font-display

Predvolené správanie, keď sa vlastný font ešte načítava, je zobraziť nič — neviditeľný text — až na tri sekundy. Je to najhoršia možná predvoľba. Používatelia vidia prázdnu stránku a predpokladajú, že niečo nefunguje.

Pridajte toto 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žite zobrazí záložný font a po načítaní ho vymení za vlastný font. Používateľ môže čítať stránku od nultej milisekundy. Daňou je krátky posun rozloženia pri výmene, ktorý zmiernite ďalšou technikou.

Zlaďte metriky záložného fontu

Prebliknutie neštýlovaného textu pôsobí rušivo len vtedy, keď majú záložný a vlastný font veľmi odlišné metriky. Moderné CSS to rieši pomocou size-adjust, ascent-override a podobných vlastností:

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

Keď sú metriky záložného fontu doladené, výmena je sotva postrehnuteľná — slová zaberajú rovnaký horizontálny priestor pred aj po načítaní vlastného fontu.

Práca Google na --allow-fallback-font-metrics je dnes základnou podporou prehliadačov a existuje aj nástrojový pipeline (knižnica fontaine a podobné), ktorý vám správne čísla vypočíta za pár sekúnd.

Hostujte fonty sami

Google Fonts je pohodlné, bezplatné a prináša dva skutočné náklady:

1. Druhý TLS handshake. Aj s HTTP/3 a zlučovaním spojení platí, že ďalší origin je málokedy zadarmo.
2. Otázka súkromia a compliance. Viaceré európske súdy rozhodli, že načítanie Google Fonts z fonts.gstatic.com predstavuje odoslanie osobných údajov (IP adresy) tretej strane. Self-hosting túto otázku úplne odstraňuje.

Pipeline na stiahnutie a vlastné hostovanie je:

1. Získajte súbor WOFF2 (variabilné zostavenie, ak existuje)
2. Zúžte ho na skripty, ktoré vaše publikum skutočne používa
3. Servírujte ho z rovnakého originu ako zvyšok webu, s dlhým Cache-Control: max-age=31536000, immutable
4. Preloadnite najkritickejší rez: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

To je celý pipeline. Pri existujúcom webe to zaberie popoludnie a takmer nikdy sa nebudete chcieť vrátiť späť.

Kedy vlastné fonty úplne vynechať

Stojí za to povedať to nahlas: nie každý web potrebuje vlastný font. Systémový font stack je dnes naozaj krásny na každom operačnom systéme:

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

Hrúbka je správna, metriky sú správne, vykresľovanie je vyladené pre zariadenie a náklady v bajtoch prenesených po sieti sú presne nula. Pre nástrojový web, internú aplikáciu, portfólio uprednostňujúce obsah alebo čokoľvek určené používateľom na pomalých sieťach je systémový stack správna odpoveď.

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

💡 Vyskúšajte toto: Preveďte svoje súbory TTF alebo OTF na moderný WOFF2 s pripraveným CSS pomocou Webfont Generator, čo je zmena formátu, ktorú príspevok odporúča.

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

Úprimné zhrnutie

Pre typický malý web pokrývajú celý príbeh výkonu webových fontov štyri kroky:

1. Jeden variabilný font na rodinu a skript
2. font-display: swap so zladenými metrikami záložného fontu
3. Self-hosting s dlhými cache hlavičkami a preload pre kritický rez
4. Alebo fonty úplne vynechať a použiť systémový stack

Urobte to raz a získate späť niekoľko stoviek kilobajtov z domovskej stránky, vyhráte niekoľko stoviek milisekúnd vnímaného výkonu a popri tom odstránite závislosť od tretej strany. Len málo zmien má lepší pomer úsilia a prínosu.