Lettertype-optimalisatie: subsetting, variabele lettertypen en lettertypeweergave
Weblettertypen zijn vaak de over het hoofd geziene factor bij prestatie-optimalisaties. EEN een site die zonder optimalisatie Google Fonts gebruikt, kan tussen 300 KB en 800 KB laden alleen lettertypen: bronnen die weergave blokkeren, LCP beïnvloeden en lay-out veroorzaken verschuiving tijdens het wisselen van lettertype. Met de juiste technieken kan diezelfde typografie dat wel vereisen minder dan 60 KB en veroorzaken geen zichtbare verschuivingen.
De markt voor weblettertypen is de afgelopen jaren radicaal veranderd. DE variabel
lettertypen kunt u alle varianten (normaal, vet, cursief) opnemen
één enkel bestand in plaats van vier of meer afzonderlijke bestanden. Subsetting vermindert bestanden
het verwijderen van onnodige tekens. En de strategieën font-display toestaan
om precies te bepalen hoe uw browser zich gedraagt tijdens het laden.
Wat je gaat leren
- Hoe WOFF2 werkt en waarom het het optimale formaat voor internet is
- Subsetting van lettertypen: verklein bestanden van 400 KB naar 60 KB met pyftsubset en Glyphhanger
- Variabele lettertypen: één bestand voor alle varianten, met een besparing van 40-60%
- De lettertypeweergavestrategieën: swap, optioneel, fallback, block
- Unicode-bereik om alleen de noodzakelijke subsets te laden
- Maak vooraf verbinding en laad vooraf om FOIT (Flash of Invisible Text) te elimineren
- Overschrijf statistieken (@font-face) om CLS door lettertypewisseling te verminderen
WOFF2: het standaardformaat voor weblettertypen
WOFF2 (Web Open Font Format 2) maakt gebruik van Brotli-compressie, wat resulteert in een reductie 30-50% vergeleken met WOFF en 60-70% vergeleken met originele OTF/TTF-formaten. Browserondersteuning is universeel (100% van de moderne browsers), dus niet langer nodig bieden WOFF- of TTF-fallbacks voor sites die zich richten op browsers van de afgelopen vijf jaar.
/* 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;
}Subsetting lettertype: verklein het bestand tot het noodzakelijke minimum
Een compleet lettertypebestand zoals Inter Regular bevat ongeveer 2.400 bedekkende glyphs honderden talen. Als uw site alleen in het Italiaans en Engels is, heeft u dit nodig minder dan 300 tekens. Subsetting verwijdert alle ongebruikte glyphs, waardoor het aantal wordt verminderd de bestandsgrootte drastisch.
Subsetting met 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: analyse en automatische subsetting
Glyphhanger scant uw site (of statische HTML) en genereert de minimale subset gebaseerd op de daadwerkelijk gebruikte karakters:
# 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-bereik: voorwaardelijke subsets
Het pand unicode-range in @font-face instrueert de
browser om dat lettertypebestand alleen te downloaden als de pagina lettertypen daarin bevat
Unicode-bereik. Dit is het mechanisme dat door Google Fonts wordt gebruikt om subsets aan te bieden
verschillend voor gebruikers met verschillende talen:
/* 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;
}Variabele lettertypen: één bestand voor alle variaties
Variabele lettertypen (geïntroduceerd in de OpenType 1.8-specificatie) maken één lettertype mogelijk bestand dat een continuüm van varianten langs een of meer variatieassen bevat. De meest voorkomende assen zijn:
- wgh (gewicht): 100 tot 900
- breedte (breedte): gecondenseerd, normaal, uitgebreid
- itaal (cursief): van rechtop naar cursief
- slnt (schuin): helling van het personage
- oeps (optische maat): optimalisatie voor verschillende maten
/* 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;
}Echte besparingen met variabele lettertypen
| Scenario | Traditionele aanpak | Variabel lettertype | Besparingen |
|---|---|---|---|
| 4 gewichten (400.500.600.700) | 4 bestanden × 30 KB = 120 KB | 1 bestand = 48 KB | 60% |
| 4 gewichten + cursief | 8 bestanden × 30 KB = 240 KB | 1 bestand = 72 KB | 70% |
| Volledig weergavelettertype | 12 bestanden = 360 KB | 1-2 bestanden = 90 KB | 75% |
De strategieën voor het weergeven van lettertypen
Het pand font-display bepaalt hoe de browser omgaat met de
tekstweergave tijdens het laden van het weblettertype. De keuze van
De juiste strategie hangt af van de afweging tussen FOIT (Flash of Invisible Text) en
FOUT (Flash of Unstyled Text), en hun impact op CLS en LCP.
lettertype-display: swap (meest gebruikelijk)
De browser geeft de tekst onmiddellijk weer met het systeemlettertype (FOUT) en vervangt deze vervolgens met het weblettertype wanneer dit beschikbaar is. Geen FOIT, maar potentiële CLS als lettertypen ze hebben verschillende statistieken. De juiste keuze voor de meeste sites.
lettertypeweergave: optioneel (voor maximale prestaties)
De browser geeft tekst weer in systeemlettertypen. Het weblettertype wordt gedownload naar achtergrond, maar wordt alleen gebruikt als deze binnen een zeer korte periode (ongeveer 100 ms) beschikbaar is. Als de verbinding langzaam is, wordt tijdens die verbinding het systeemlettertype voor altijd gebruikt sessie. Geen FOUT, geen CLS, maar het webfont mag nooit getoond worden op langzame verbindingen. Ideaal voor locaties waar de prestaties de esthetiek overstijgen.
font-display: fallback (het compromis)
De browser heeft een zeer korte blokkeerperiode (ongeveer 100 ms) en toont vervolgens de terugval, en wordt alleen vervangen door het weblettertype als dit binnen 3 seconden beschikbaar is. Na 3 seconden, het systeemlettertype blijft gedurende de hele sessie behouden. Een goed compromis tussen FOIT en FOUT voor lettertypen die een sterke impact hebben op de visuele identiteit.
Visuele vergelijking van strategieën
| Strategie | Blokkeer periode | Wisselperiode | FOIT | VUT/CLS |
|---|---|---|---|---|
| blok | 3s | oneindig | Hoog | Si |
| ruil | 0 ms | oneindig | No | Si |
| terugval | 100ms | 3s | Minimum | Beperkt |
| optioneel | 100ms | 0 ms | Minimum | No |
| auto | browser beslist | browser beslist | Variabel | Variabel |
Elimineer CLS-lettertypewisseling met override-statistieken
De meest effectieve techniek om CLS veroorzaakt door te elimineren font-display: swap
en lijn de fallback-lettertypestatistieken uit met die van het weblettertype. CSS-eigenschappen
size-adjust, ascent-override, descent-override
e line-gap-override kunt u dit met millimeterprecisie doen.
/* 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;
}Vooraf verbinden en vooraf laden voor lettertypen van derden
Als u Google Fonts of andere lettertype-CDN's, DNS- en TLS-verbindingen van derden gebruikt
voor die domeinen voegen ze latentie toe. De richtlijnen preconnect e
preload in de <head> verminder deze overhead:
<!-- 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
>Waarschuwing: Maak geen misbruik van de Preload
Preload vertelt de browser om die bron met hoge prioriteit te laden, concurreren met kritische CSS- en JavaScript-bronnen. Gebruik voorbelasting alleen voor hoofdlettertype boven de vouw: meestal het lettertype van de hoofdtekst in het normaal gewicht. Als u te veel lettertypen vooraf laadt, kunnen de prestaties afnemen algemeen van de pagina in plaats van ze te verbeteren.
Zelfhosting versus Google-lettertypen: de vergelijking
De keuze tussen zelfhosting en Google Fonts hangt van verschillende factoren af. Zelf-hosting biedt meer controle, betere prestaties en geen afhankelijkheid van diensten van derden. Google Fonts biedt gemak en gedeelde caching tussen sites (hoewel dit laatste profiteren en afnemen met moderne browserprivacybeperkingen).
Voor maximale prestaties, zelfhosting met variabele lettertypen en aangepaste subinstellingen en de optimale keuze. Voor snelheid van implementatie zonder al te veel op te offeren prestaties, Google Fonts met correcte preconnect-richtlijnen en acceptabel.
/* 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 "*";
}Volgende stappen
Nu u de lettertype-optimalisatie onder de knie heeft, bent u klaar om te ontdekken wat er nieuw is in CSS die de manier veranderen waarop we responsieve componenten bouwen. Volgende artikel in de serie gaat dieper in op CSS-containerquery's: hoe te bouwen componenten die reageren op de grootte van hun container in plaats van op de viewport, waardoor het patroon met responsieve hulpprogrammaklassen overbodig wordt.
Conclusies
Het optimaliseren van webfonts is één van de interventies met de grootste impact/ inspanningen op het gebied van prestatie-optimalisaties. Begin met 400 KB niet-geoptimaliseerde lettertypen en ga naar een subset van een variabel lettertype van 60 KB met override-statistieken om de CLS vereist een paar eenmalige uren werk, maar heeft permanente voordelen ten opzichte van LCP, CLS en bandbreedte voor elke bezoeker.
De aanbevolen strategie in 2026: self-hosting met variabele lettertypen in WOFF2,
subsetting voor Latin Extended, font-display: swap met overschrijvingsstatistieken
voor het fallback-lettertype, bijv <link rel="preload"> voor het lettertype van de
hoofdgedeelte van de tekst. Met deze opstelling worden native prestaties bereikt zonder esthetische compromissen.