Optimalizace písma: Podmnožina, proměnná písma a zobrazení písem
Webová písma jsou často přehlíženým faktorem při optimalizaci výkonu. A web, který používá písma Google bez optimalizace, se může načíst mezi 300 kB a 800 kB pouze fonty – prostředky, které blokují vykreslování, ovlivňují LCP a způsobují rozvržení posun při záměně písma. Se správnými technikami to může stejná typografie vyžadují méně než 60 kB a nezpůsobují žádné viditelné posuny.
Trh s webovými fonty se v posledních letech radikálně změnil. THE variabilní
fonty umožňují zahrnout všechny varianty (běžné, tučné, kurzíva).
jeden soubor místo čtyř nebo více samostatných souborů. Podnastavení redukuje soubory
odstranění nepotřebných glyfů. A strategie font-display dovolit
abyste přesně řídili, jak se váš prohlížeč chová při načítání.
Co se naučíte
- Jak WOFF2 funguje a proč je to optimální formát pro web
- Podmnožina písem: zmenšete soubory ze 400 kB na 60 kB pomocí pyftsubset a Glyphhanger
- Variabilní písma: jeden soubor pro všechny varianty s úsporou 40–60 %
- Strategie zobrazení písem: swap, volitelné, záložní, blokování
- unicode-range pro načtení pouze nezbytných podmnožin
- Předpřipojení a předběžné načtení pro odstranění FOIT (Flash of Invisible Text)
- Přepište metriky (@font-face), abyste omezili CLS z výměny písem
WOFF2: Standardní formát pro webová písma
WOFF2 (Web Open Font Format 2) používá kompresi Brotli, což vede k redukci 30-50 % ve srovnání s WOFF a 60-70 % ve srovnání s původními formáty OTF/TTF. Podpora prohlížečů je univerzální (100 % moderních prohlížečů), takže již není nutná poskytovat záložní reklamy WOFF nebo TTF pro weby zacílené na prohlížeče za posledních 5 let.
/* Configurazione @font-face moderna: solo WOFF2 */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Variable font: un unico file per tutti i pesi */
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900; /* range continuo */
font-style: normal;
font-display: swap;
}Podnastavení písma: Zmenšete soubor na nezbytné minimum
Kompletní soubor písem, jako je Inter Regular, obsahuje přibližně 2 400 krycích glyfů stovky jazyků. Pokud jsou vaše stránky pouze v italštině a angličtině, potřebujete méně než 300 glyfů. Podnastavení odstraní všechny nepoužívané glyfy a sníží se velikost souboru drasticky.
Podmnožina pomocí pyftsubset (Python)
# Installa fonttools
pip install fonttools brotli
# Subset per Latin Extended (caratteri italiani inclusi)
pyftsubset Inter-Regular.ttf \
--output-file=inter-regular-subset.woff2 \
--flavor=woff2 \
--unicodes="U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, \
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, \
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"
# Risultato tipico:
# Inter-Regular.ttf: 1.2MB (OTF originale)
# inter-regular-subset.woff2: ~52KB (riduzione del 95%)Glyphhanger: Analýza a automatické podnastavení
Glyphhanger prohledá váš web (nebo statický HTML) a vygeneruje minimální podmnožinu na základě skutečně použitých znaků:
# Installa
npm install -g glyphhanger
# Scansiona un sito e genera il subset per i font usati
glyphhanger https://tuosito.com --subset=/fonts/*.ttf --formats=woff2 --LATIN
# Scansiona file HTML locali
glyphhanger ./dist/**/*.html --subset=/fonts/*.ttf --formats=woff2unicode-range: Podmíněné podmnožiny
Nemovitost unicode-range in @font-face nařizuje
prohlížeč ke stažení souboru s písmem pouze v případě, že stránka obsahuje písma v tomto souboru
rozsah unicode. Toto je mechanismus používaný službou Google Fonts k poskytování podmnožin
liší se od uživatelů s různými jazyky:
/* Subset Latin di base - scaricato per tutti */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-latin.woff2') format('woff2');
font-weight: 400;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* Subset Cirillico - scaricato solo se la pagina usa cirillico */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-cyrillic.woff2') format('woff2');
font-weight: 400;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}Variabilní písma: Jeden soubor pro všechny varianty
Variabilní fonty (zavedené ve specifikaci OpenType 1.8) umožňují jedno soubor obsahovat kontinuum variant podél jedné nebo více os variace. Nejběžnější osy jsou:
- hm (váha): 100 až 900
- wdth (šířka): zhuštěný, normální, rozšířený
- ital (kurzíva): od svislé k kurzívě
- slnt (šikmý): šikmost postavy
- jejda (optická velikost): optimalizace pro různé velikosti
/* Variable font con asse weight */
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Uso di font-variation-settings per control granulare */
h1 {
font-family: 'Inter Variable', sans-serif;
font-weight: 700;
/* Oppure usando direttamente variation settings */
font-variation-settings: 'wght' 700, 'opsz' 32;
}
p {
font-family: 'Inter Variable', sans-serif;
font-weight: 400;
font-variation-settings: 'wght' 400, 'opsz' 16;
}
/* Animazione fluida del peso con variable fonts */
.title-animated {
font-family: 'Inter Variable', sans-serif;
transition: font-variation-settings 0.3s ease;
}
.title-animated:hover {
font-variation-settings: 'wght' 800;
}Skutečné úspory s variabilními fonty
| Scénář | Tradiční přístup | Variabilní písmo | Úspory |
|---|---|---|---|
| 4 závaží (400,500,600,700) | 4 soubory × 30 kB = 120 kB | 1 soubor = 48 kB | 60 % |
| 4 závaží + kurzíva | 8 souborů × 30 kB = 240 kB | 1 soubor = 72 kB | 70 % |
| Plně zobrazené písmo | 12 souborů = 360 kB | 1-2 soubory = 90 kB | 75 % |
Strategie zobrazení písem
Nemovitost font-display řídí, jak prohlížeč zachází s
zobrazení textu při načítání webového písma. Výběr z
správná strategie závisí na kompromisu mezi FOIT (Flash of Invisible Text) a
FOUT (Flash of Unstyled Text) a jejich dopad na CLS a LCP.
font-display: swap (nejběžnější)
Prohlížeč okamžitě zobrazí text se systémovým písmem (FOUT), poté jej nahradí s webovým písmem, když je k dispozici. Žádné FOIT, ale potenciální fonty CLS if mají různé metriky. Správná volba pro většinu webů.
font-display: volitelný (pro maximální výkon)
Prohlížeč zobrazuje text v systémových fontech. Webové písmo se stáhne do pozadí, ale používá se pouze v případě, že je k dispozici během velmi krátké doby (asi 100 ms). Pokud je připojení pomalé, bude se během tohoto připojení navždy používat systémové písmo zasedání. Žádné FOUT, žádné CLS, ale webové písmo se nemusí nikdy zobrazit na pomalých připojeních. Ideální pro místa, kde výkon převyšuje estetiku.
font-display: záložní (kompromis)
Prohlížeč má velmi krátkou dobu blokování (asi 100 ms), poté zobrazí nouzový a nahradí se webovým písmem, pouze pokud je k dispozici do 3 sekund. Po 3 sekundách, systémové písmo zůstane po celou dobu relace. Dobrý kompromis mezi FOIT a FOUT pro písma, která mají silný dopad na vizuální identitu.
Vizuální srovnání strategií
| Strategie | Období blokování | Výměnné období | FOIT | FOUT/CLS |
|---|---|---|---|---|
| blok | 3s | nekonečný | Vysoký | Si |
| vyměnit | 0 ms | nekonečný | No | Si |
| záložní | 100 ms | 3s | Minimální | Omezený |
| volitelný | 100 ms | 0 ms | Minimální | No |
| auto | rozhodne prohlížeč | rozhodne prohlížeč | Variabilní | Variabilní |
Eliminujte výměnu písem CLS pomocí přepisování metrik
Nejúčinnější technika k odstranění CLS způsobeného font-display: swap
a zarovnat metriky záložních písem s metrikami webového písma. Vlastnosti CSS
size-adjust, ascent-override, descent-override
e line-gap-override vám to umožní s milimetrovou přesností.
/* Trova i valori corretti per Inter su Arial come fallback */
/* Metodo 1: Usa lo strumento Fallback Font Generator di Malte Ubl */
/* https://screenspan.net/fallback */
/* Metodo 2: Calcola manualmente le metriche */
/* Inter: UPM 2048, ascender 1984, descender -494, line-gap 0 */
/* Arial: UPM 2048, ascender 1854, descender -434, line-gap 67 */
@font-face {
font-family: 'Inter Fallback';
src: local('Arial');
/* size-adjust: rapporto tra le dimensioni complessive */
size-adjust: 107.64%;
/* Override delle metriche verticali */
ascent-override: 90.2%;
descent-override: 22.48%;
line-gap-override: 0%;
}
/* Usa sempre il fallback ottimizzato come secondo nella stack */
body {
font-family: 'Inter', 'Inter Fallback', Arial, sans-serif;
}Předpřipojení a předběžné načtení písem třetích stran
Pokud používáte písma Google nebo jiné CDN písem třetích stran, připojení DNS a TLS
směrem k těmto doménám přidávají latenci. Směrnice preconnect e
preload nella <head> snížit tuto režii:
<!-- Per Google Fonts: preconnect ai domini necessari -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
rel="stylesheet">
<!-- Ancora meglio: self-hosting con preload diretto -->
<link
rel="preload"
href="/fonts/inter-variable.woff2"
as="font"
type="font/woff2"
crossorigin
>Upozornění: Nezneužívejte předpětí
Preload říká prohlížeči, aby načetl daný zdroj s vysokou prioritou, soutěží s kritickými zdroji CSS a JavaScript. Používejte předpětí pouze pro hlavní písmo nad okrajem – obvykle písmo hlavního textu v pravidelná váha. Pokud předem načtete příliš mnoho písem, můžete snížit výkon obecné stránky namísto jejich vylepšení.
Self-hosting vs Google Fonts: Porovnání
Volba mezi self-hostingem a Google Fonts závisí na několika faktorech. Vlastní hosting nabízí větší kontrolu, lepší výkon a žádnou závislost na službách třetích stran. Google Fonts nabízí pohodlí a sdílené ukládání do mezipaměti mezi weby (i když to druhé výhody a snížené s moderními omezeními soukromí prohlížeče).
Pro maximální výkon, self-hosting s variabilními fonty a vlastním podnastavením a optimální volba. Pro rychlost implementace bez přílišného obětování výkon, písma Google se správnými direktivami předběžného připojení a přijatelné.
/* Pipeline completa per self-hosting ottimizzato:
1. Scarica i font originali (OTF/TTF) dal sito del font designer
2. Crea subset con pyftsubset per Latin + caratteri speciali necessari
3. Converti in WOFF2
4. Carica i file in /public/fonts/
5. Configura gli header HTTP per il caching long-term
*/
/* Nel server (es: nginx) */
location ~* \.(woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
add_header Access-Control-Allow-Origin "*";
}Další kroky
Po zvládnutí optimalizace písem jste připraveni prozkoumat, co je nového v CSS které mění způsob, jakým vytváříme citlivé komponenty. Další článek v seriálu se ponoří do CSS Container Queries: jak sestavit komponenty, které reagují na velikost jejich nádoby místo na viewport, čímž se vzor s responzivními třídami obslužných programů stává zastaralým.
Závěry
Optimalizace webových fontů je jedním ze zásahů s nejvyšším dopadem/ úsilí o optimalizaci výkonu. Začněte se 400 kB neoptimalizovanými fonty a získejte podmnožinu proměnného písma 60 kB s přepisovací metrikou, abyste odstranili CLS vyžaduje několik jednorázových hodin práce, ale má trvalé výhody oproti LCP, CLS a šířka pásma pro každého návštěvníka.
Doporučená strategie v roce 2026: self-hosting s variabilními fonty ve WOFF2,
podmnožina pro Latin Extended, font-display: swap s přepsáním metrik
pro záložní písmo, např <link rel="preload"> pro písmo
tělo textu. Toto nastavení dosahuje přirozeného výkonu bez estetických kompromisů.