Optimizarea fonturilor: subsetare, fonturi variabile și afișare a fonturilor
Fonturile web sunt adesea factorul trecut cu vederea în optimizarea performanței. A site-ul care folosește fonturi Google fără optimizare poate încărca între 300KB și 800KB numai fonturi — resurse care blochează redarea, impactează LCP și cauzează aspectul deplasare în timpul schimbului de fonturi. Cu tehnicile potrivite, aceeași tipografie poate necesită mai puțin de 60 KB și nu provoacă schimbări vizibile.
Piața fonturilor web s-a schimbat radical în ultimii ani. THE variabilă
fonturi vă permit să includeți toate variantele (regulate, aldine, cursive) în
un singur fișier în loc de patru sau mai multe fișiere separate. Subsetarea reduce fișierele
eliminarea glifelor inutile. Și strategiile font-display permite
pentru a controla exact modul în care browserul dumneavoastră se comportă la încărcare.
Ce vei învăța
- Cum funcționează WOFF2 și de ce este formatul optim pentru web
- Subsetarea fontului: reduceți fișierele de la 400KB la 60KB cu pyftsubset și Glyphhanger
- Fonturi variabile: un singur fișier pentru toate variantele, cu economii de 40-60%
- Strategiile de afișare a fonturilor: swap, opțional, fallback, block
- unicode-range pentru a încărca numai subseturile necesare
- Preconectați și preîncărcați pentru a elimina FOIT (Flash of Invisible Text)
- Ignorați valorile (@font-face) pentru a reduce CLS de la schimbarea fonturilor
WOFF2: Formatul standard pentru fonturile web
WOFF2 (Web Open Font Format 2) folosește compresia Brotli, rezultând o reducere 30-50% față de WOFF și 60-70% față de formatele originale OTF/TTF. Suportul pentru browser este universal (100% din browserele moderne), deci nu mai este necesar oferiți alternative WOFF sau TTF pentru site-urile care vizează browsere din ultimii 5 ani.
/* 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;
}Subsetarea fontului: reduceți fișierul la minimul necesar
Un fișier de font complet precum Inter Regular conține aproximativ 2.400 de glife de acoperire sute de limbi. Dacă site-ul dvs. este doar în italiană și engleză, aveți nevoie mai puțin de 300 de glife. Subsetarea elimină toate glifele neutilizate, reducând dimensiunea fișierului drastic.
Subsetare cu 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: analiză și subsetare automată
Glyphhanger scanează site-ul dvs. (sau HTML static) și generează subsetul minim pe baza caracterelor utilizate efectiv:
# 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: Subseturi condiționale
Proprietatea unicode-range in @font-face îl instruiește pe
browser pentru a descărca acel fișier cu fonturi numai dacă pagina conține fonturi
gama unicode. Acesta este mecanismul folosit de Google Fonts pentru a servi subseturi
diferit de utilizatorii cu limbi diferite:
/* 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;
}Fonturi variabile: un fișier pentru toate variantele
Fonturile variabile (introduse în specificația OpenType 1.8) permit un singur fișier pentru a conține un continuum de variante de-a lungul uneia sau mai multor axe de variație. Cele mai comune axe sunt:
- wght (greutate): 100 până la 900
- wdth (lățime): condensat, normal, extins
- ital (italic): de la vertical la italic
- slnt (înclinare): înclinare a personajului
- hopa (dimensiune optică): optimizare pentru diferite dimensiuni
/* 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;
}Economii reale cu fonturi variabile
| Scenariu | Abordare tradițională | Font variabil | Economii |
|---|---|---|---|
| 4 greutăți (400.500.600.700) | 4 fișiere × 30 KB = 120 KB | 1 fișier = 48KB | 60% |
| 4 greutăți + cursiv | 8 fișiere × 30KB = 240KB | 1 fișier = 72KB | 70% |
| Font de afișare completă | 12 fișiere = 360KB | 1-2 fișiere = 90KB | 75% |
Strategiile de afișare a fonturilor
Proprietatea font-display controlează modul în care browserul gestionează
afișarea textului în timpul încărcării fontului web. Alegerea de
strategia corectă depinde de compromisul dintre FOIT (Flash of Invisible Text) și
FOUT (Flash of Unstyled Text) și impactul lor asupra CLS și LCP.
font-display: swap (cel mai comun)
Browserul afișează imediat textul cu fontul de sistem (FOUT), apoi îl înlocuiește cu fontul web atunci când acesta este disponibil. Fără FOIT, dar potenţial CLS dacă fonturi au valori diferite. Alegerea potrivită pentru majoritatea site-urilor.
font-display: opțional (pentru performanță maximă)
Browserul afișează text în fonturile de sistem. Fontul web este descărcat în fundal, dar folosit numai dacă este disponibil într-o perioadă foarte scurtă (aproximativ 100 ms). Dacă conexiunea este lentă, fontul de sistem este folosit pentru totdeauna în timpul acelei conexiuni sesiune. Fără FOUT, fără CLS, dar fontul web poate să nu fie afișat niciodată pe conexiuni lente. Ideal pentru site-urile în care performanța depășește estetica.
font-display: fallback (compromisul)
Browserul are o perioadă de blocare foarte scurtă (aproximativ 100 ms), apoi afișează alternativa, și se înlocuiește cu fontul web numai dacă este disponibil în 3 secunde. După 3 secunde, fontul sistemului rămâne pe toată durata sesiunii. Un bun compromis între FOIT și FOUT pentru fonturi care au un impact puternic asupra identității vizuale.
Comparația vizuală a strategiilor
| Strategie | Perioada de bloc | Perioada de schimb | FOIT | FOUT/CLS |
|---|---|---|---|---|
| bloc | 3s | infinit | Ridicat | Si |
| schimb | 0 ms | infinit | No | Si |
| da înapoi | 100 ms | 3s | Minim | Limitat |
| opțional | 100 ms | 0 ms | Minim | No |
| masina | browser-ul decide | browser-ul decide | Variabilă | Variabilă |
Eliminați schimbul de fonturi CLS cu parametrii de anulare
Cea mai eficientă tehnică pentru eliminarea CLS cauzată de font-display: swap
și aliniați valorile fontului alternativ cu cele ale fontului web. Proprietăți CSS
size-adjust, ascent-override, descent-override
e line-gap-override vă permit să faceți acest lucru cu precizie milimetrică.
/* 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;
}Preconectare și preîncărcare pentru fonturi terțe
Dacă utilizați Fonturi Google sau alte conexiuni CDN, DNS și TLS cu fonturi terțe
față de acele domenii adaugă latență. Directivele preconnect e
preload în <head> reduceți acest cost general:
<!-- 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
>Avertisment: Nu abuzați de Preîncărcare
Preîncărcare îi spune browserului să încarce acea resursă cu prioritate ridicată, concurând cu resursele CSS și JavaScript esențiale. Utilizați preîncărcarea numai pentru fontul principal deasupra paginii — de obicei fontul textului corpului din greutate normală. Dacă preîncărcați prea multe fonturi, puteți degrada performanța generală a paginii în loc să le îmbunătăţească.
Auto-găzduire vs fonturi Google: comparația
Alegerea între auto-găzduire și fonturi Google depinde de mai mulți factori. Auto-găzduire oferă mai mult control, performanță mai bună și nicio dependență de servicii terțe. Google Fonts oferă confort și stocare în cache partajată între site-uri (deși cea din urmă beneficiază și diminuează cu restricțiile moderne de confidențialitate a browserului).
Pentru performanță maximă, auto-găzduire cu fonturi variabile și subsetare personalizată și alegerea optimă. Pentru viteza de implementare fără a sacrifica prea mult performanță, fonturi Google cu directive de preconectare corecte și acceptabile.
/* 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 "*";
}Următorii pași
Cu optimizarea fonturilor stăpânită, sunteți gata să explorați ce este nou în CSS care schimbă modul în care construim componente receptive. În continuare articolul din serie se aprofundează în CSS Container Queries: how to build componente care reacționează la dimensiunea recipientului lor în loc de viewport, făcând ca modelul cu clase de utilitate receptive să fie depășit.
Concluzii
Optimizarea fonturilor web este una dintre intervențiile cu cel mai mare impact/ efort în optimizarea performanței. Începeți cu fonturi neoptimizate de 400 KB și ajungeți la subsetul de font variabil de 60 KB cu valori de anulare pentru a elimina CLS necesită câteva ore unice de muncă, dar are beneficii permanente față de LCP, CLS și lățime de bandă pentru fiecare vizitator.
Strategia recomandată în 2026: auto-găzduire cu fonturi variabile în WOFF2,
subsetare pentru Latin Extended, font-display: swap cu valori de anulare
pentru fontul alternativ, de ex <link rel="preload"> pentru fontul
corpul textului. Această configurație realizează performanțe native fără compromisuri estetice.