Optymalizacja czcionek: podzbiór, zmienne czcionki i wyświetlanie czcionek
Czcionki internetowe są często pomijanym czynnikiem w optymalizacji wydajności. A witryna korzystająca z czcionek Google bez optymalizacji może załadować od 300 KB do 800 KB tylko czcionki — zasoby, które blokują renderowanie, wpływają na LCP i powodują układ shift podczas zamiany czcionek. Dzięki odpowiednim technikom ta sama typografia może wymagają mniej niż 60 KB i nie powodują żadnych widocznych przesunięć.
Rynek czcionek internetowych zmienił się radykalnie w ostatnich latach. TO zmienna
czcionki pozwalają uwzględnić wszystkie warianty (zwykłe, pogrubione, kursywa) w
pojedynczy plik zamiast czterech lub więcej oddzielnych plików. Podzbiór zmniejsza liczbę plików
usuwanie niepotrzebnych glifów. I strategie font-display pozwolić
aby dokładnie kontrolować zachowanie Twojej przeglądarki podczas ładowania.
Czego się nauczysz
- Jak działa WOFF2 i dlaczego jest to optymalny format dla Internetu
- Podzbiór czcionek: zmniejsz rozmiar plików z 400 KB do 60 KB za pomocą pyftsubset i Glyphhanger
- Zmienne czcionki: jeden plik dla wszystkich odmian, oszczędność 40-60%
- Strategie wyświetlania czcionek: zamiana, opcjonalna, rezerwowa, blok
- zakres unicode, aby załadować tylko niezbędne podzbiory
- Wstępnie podłącz i załaduj, aby wyeliminować FOIT (Flash of Invisible Text)
- Zastąp metryki (@font-face), aby ograniczyć CLS przed zamianą czcionek
WOFF2: Standardowy format czcionek internetowych
WOFF2 (Web Open Font Format 2) wykorzystuje kompresję Brotli, co skutkuje redukcją 30-50% w porównaniu do WOFF i 60-70% w porównaniu do oryginalnych formatów OTF/TTF. Obsługa przeglądarek jest uniwersalna (100% nowoczesnych przeglądarek), więc nie jest już konieczna zapewniać rozwiązania zastępcze WOFF lub TTF dla witryn kierowanych na przeglądarki z ostatnich 5 lat.
/* 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;
}Podstawianie czcionek: Zmniejsz plik do niezbędnego minimum
Kompletny plik czcionki, taki jak Inter Regular, zawiera około 2400 glifów kryjących setki języków. Jeśli Twoja witryna jest dostępna tylko w języku włoskim i angielskim, potrzebujesz mniej niż 300 glifów. Podzbiór usuwa wszystkie nieużywane glify, redukując drastycznie zwiększyć rozmiar pliku.
Podzbiór za 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: analiza i automatyczne podzbiór
Glyphhanger skanuje Twoją witrynę (lub statyczny kod HTML) i generuje minimalny podzbiór w oparciu o faktycznie użyte znaki:
# 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=woff2zakres unicode: Podzbiory warunkowe
Nieruchomość unicode-range in @font-face instruuje
przeglądarkę, aby pobrała ten plik czcionki tylko wtedy, gdy strona zawiera czcionki
zakres Unicode. Jest to mechanizm używany przez Google Fonts do obsługi podzbiorów
różni się od użytkowników posługujących się różnymi językami:
/* 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;
}Zmienne czcionki: jeden plik dla wszystkich odmian
Zmienne czcionki (wprowadzone w specyfikacji OpenType 1.8) pozwalają na użycie pojedynczych plik zawierający kontinuum wariantów wzdłuż jednej lub większej liczby osi zmienności. The most common axes are:
- waga (waga): 100 do 900
- szer (szerokość): skondensowana, normalna, rozszerzona
- włoski (kursywa): od pozycji pionowej do kursywy
- Slnt (nachylenie): nachylenie znaku
- ups (rozmiar optyczny): optymalizacja dla różnych rozmiarów
/* 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;
}Prawdziwe oszczędności dzięki zmiennym czcionkom
| Scenariusz | Tradycyjne podejście | Zmienna czcionka | Oszczędności |
|---|---|---|---|
| 4 obciążniki (400 500 600 700) | 4 pliki × 30 KB = 120 KB | 1 plik = 48 KB | 60% |
| 4 wagi + kursywa | 8 plików × 30 KB = 240 KB | 1 plik = 72 KB | 70% |
| Pełna czcionka wyświetlacza | 12 plików = 360 KB | 1-2 pliki = 90 KB | 75% |
Strategie wyświetlania czcionek
Nieruchomość font-display kontroluje sposób, w jaki przeglądarka obsługuje pliki
wyświetlanie tekstu podczas ładowania czcionki internetowej. Wybór
właściwa strategia zależy od kompromisu pomiędzy FOIT (Flash of Invisible Text) a
FOUT (Flash of Unstyled Text) i ich wpływ na CLS i LCP.
wyświetlanie czcionek: zamiana (najczęściej)
Przeglądarka natychmiast wyświetla tekst czcionką systemową (FOUT), po czym go podmienia z czcionką internetową, jeśli jest ona dostępna. Brak FOIT, ale potencjalny CLS, jeśli czcionki mają różne metryki. Właściwy wybór dla większości witryn.
wyświetlanie czcionek: opcjonalne (dla maksymalnej wydajności)
Przeglądarka wyświetla tekst czcionkami systemowymi. Czcionka internetowa zostanie pobrana do tle, ale używane tylko wtedy, gdy jest dostępne w bardzo krótkim czasie (około 100 ms). Jeśli połączenie jest wolne, czcionka systemowa będzie używana na zawsze podczas tego połączenia sesja. Żadnego FOUT, żadnego CLS, ale czcionka internetowa może nigdy nie zostać wyświetlona na wolnych łączach. Idealny do miejsc, gdzie wydajność przewyższa estetykę.
wyświetlanie czcionek: rezerwa (kompromis)
Przeglądarka ma bardzo krótki okres blokowania (około 100ms) po czym pokazuje awarię, i zastępuje czcionką internetową tylko wtedy, gdy jest dostępna w ciągu 3 sekund. Po 3 sekundach czcionka systemowa pozostaje niezmieniona przez całą sesję. Dobry kompromis pomiędzy FOIT i FOUT dla czcionek, które mają silny wpływ na identyfikację wizualną.
Wizualne porównanie strategii
| Strategia | Okres bloku | Okres wymiany | FOIT | FOUT/CLS |
|---|---|---|---|---|
| blok | 3s | nieskończony | Wysoki | Si |
| zamieniać | 0 ms | nieskończony | No | Si |
| rezerwowy | 100ms | 3s | Minimum | Ograniczony |
| fakultatywny | 100ms | 0 ms | Minimum | No |
| samochód | decyduje przeglądarka | decyduje przeglądarka | Zmienny | Zmienny |
Wyeliminuj zamianę czcionek CLS za pomocą nadpisania metryk
Najbardziej skuteczna technika eliminacji CLS spowodowanego przez font-display: swap
i dopasuj metryki czcionki zastępczej do czcionek internetowych. Właściwości CSS
size-adjust, ascent-override, descent-override
e line-gap-override pozwalają to zrobić z milimetrową precyzją.
/* 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;
}Wstępnie podłącz i załaduj czcionki innych firm
Jeśli korzystasz z czcionek Google lub innych sieci CDN z czcionkami innych firm, połączeń DNS i TLS
w stosunku do tych domen dodają opóźnienia. Dyrektywy preconnect e
preload nella <head> zmniejsz to obciążenie:
<!-- 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
>Ostrzeżenie: nie nadużywaj funkcji wstępnego ładowania
Preload informuje przeglądarkę, aby załadowała ten zasób z wysokim priorytetem, konkurując z krytycznymi zasobami CSS i JavaScript. Używaj wstępnego ładowania tylko dla główna czcionka znajdująca się w części strony widocznej na ekranie — zazwyczaj czcionka tekstu głównego w pliku regularna waga. Jeśli wstępnie załadujesz zbyt wiele czcionek, możesz obniżyć wydajność ogólnych strony, zamiast je ulepszać.
Hosting własny a czcionki Google: porównanie
Wybór między hostingiem własnym a czcionkami Google zależy od kilku czynników. Hosting własny oferuje większą kontrolę, lepszą wydajność i brak zależności od usług stron trzecich. Czcionki Google oferują wygodę i współdzielone buforowanie między witrynami (chociaż ta ostatnia korzyści i zmniejszone w związku z ograniczeniami prywatności współczesnych przeglądarek).
Aby uzyskać maksymalną wydajność, samodzielny hosting ze zmiennymi czcionkami i niestandardowymi podzestawami i optymalny wybór. Dla szybkości wdrożenia bez poświęcania zbyt wiele wydajność, czcionki Google z poprawnymi dyrektywami dotyczącymi połączenia wstępnego i akceptowalne.
/* 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 "*";
}Następne kroki
Po opanowaniu optymalizacji czcionek możesz poznać nowości w CSS które zmieniają sposób, w jaki budujemy responsywne komponenty. Następny artykuł z tej serii poświęcony jest zapytaniom kontenerowym CSS: jak budować komponenty, które reagują na wielkość pojemnika zamiast viewport, dzięki czemu wzór z responsywnymi klasami narzędzi staje się przestarzały.
Wnioski
Optymalizacja czcionek internetowych jest jedną z interwencji o największym wpływie/ wysiłek w optymalizację wydajności. Zacznij od niezoptymalizowanych czcionek o rozmiarze 400 KB i przejdź do podzbioru zmiennej czcionki o rozmiarze 60 KB z nadpisywaniem metryk, aby wyeliminować CLS wymaga kilku jednorazowych godzin pracy, ale ma stałe korzyści w stosunku do LCP, CLS i przepustowość dla każdego odwiedzającego.
Rekomendowana strategia na rok 2026: self-hosting ze zmiennymi czcionkami w WOFF2,
podzbiór dla języka łacińskiego rozszerzonego, font-display: swap z nadpisywaniem metryk
dla czcionki zastępczej, np <link rel="preload"> dla czcionki
treść tekstu. Ta konfiguracja zapewnia natywną wydajność bez kompromisów estetycznych.