Yazı Tipi Optimizasyonu: Alt Kümeleme, Değişken Yazı Tipleri ve yazı tipi gösterimi
Web yazı tipleri genellikle performans optimizasyonlarında gözden kaçırılan faktördür. bir Google Fonts'u optimizasyon olmadan kullanan site 300 KB ile 800 KB arasında yüklenebilir yalnızca yazı tipleri — oluşturmayı engelleyen, LCP'yi etkileyen ve düzene neden olan kaynaklar yazı tipi değişimi sırasında kaydırma. Doğru tekniklerle aynı tipografi, 60 KB'tan az gerektirir ve gözle görülür herhangi bir kaymaya neden olmaz.
Web yazı tipi pazarı son yıllarda kökten değişti. THE değişken
yazı tipleri tüm değişkenleri (normal, kalın, italik) eklemenize olanak tanır
Dört veya daha fazla ayrı dosya yerine tek bir dosya. Alt kümeleme dosyaları azaltır
gereksiz gliflerin kaldırılması. Ve stratejiler font-display izin ver
Tarayıcınızın yükleme sırasında nasıl davranacağını tam olarak kontrol etmek için.
Ne Öğreneceksiniz
- WOFF2 nasıl çalışır ve neden web için en uygun formattır?
- Yazı tipi alt kümesi: pyftsubset ve Glyphhanger ile dosyaları 400 KB'tan 60 KB'ye düşürün
- Değişken yazı tipleri: %40-60 tasarrufla tüm varyasyonlar için tek dosya
- Yazı tipi görüntüleme stratejileri: takas, isteğe bağlı, geri dönüş, blok
- yalnızca gerekli alt kümeleri yüklemek için unicode aralığı
- FOIT'i (Görünmez Metin Parlaması) ortadan kaldırmak için önceden bağlanın ve önceden yükleyin
- CLS'yi yazı tipi değişiminden azaltmak için metrikleri (@font-face) geçersiz kılın
WOFF2: Web Yazı Tipleri için Standart Format
WOFF2 (Web Açık Yazı Tipi Formatı 2), Brotli sıkıştırmasını kullanır ve bu da yazı tipinde azalmaya neden olur. WOFF ile karşılaştırıldığında %30-50 ve orijinal OTF/TTF formatlarıyla karşılaştırıldığında %60-70. Tarayıcı desteği evrenseldir (modern tarayıcıların %100'ü) dolayısıyla artık gerekli değildir Son 5 yılın tarayıcılarını hedefleyen siteler için WOFF veya TTF geri dönüşleri sağlayın.
/* 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;
}Yazı Tipi Alt Kümesi: Dosyayı Gerekli Minimuma İndirin
Inter Regular gibi eksiksiz bir yazı tipi dosyası yaklaşık 2.400 kaplama glifi içerir yüzlerce dil. Siteniz yalnızca İtalyanca ve İngilizce ise, 300'den az glif. Alt kümeleme, kullanılmayan tüm glifleri kaldırır ve dosya boyutu büyük ölçüde.
Pyftsubset ile alt kümeleme (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 ve Otomatik Alt Kümeleme
Glyphhanger sitenizi (veya statik HTML'yi) tarar ve minimum alt kümeyi oluşturur gerçekte kullanılan karakterlere göre:
# 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 aralığı: Koşullu Alt Kümeler
Mülkiyet unicode-range in @font-face talimat verir
Tarayıcının bu yazı tipi dosyasını indirmesi için sayfanın o yazı tipini içermesi gerekir.
Unicode aralığı. Bu, Google Fonts'un alt kümeleri sunmak için kullandığı mekanizmadır
farklı dillere sahip kullanıcılardan farklıdır:
/* 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;
}Değişken Fontlar: Tüm Varyasyonlar için Tek Dosya
Değişken yazı tipleri (OpenType 1.8 spesifikasyonunda tanıtılmıştır) tek bir yazı tipine izin verir. Bir veya daha fazla varyasyon ekseni boyunca değişkenlerin sürekliliğini içeren dosya. En yaygın eksenler şunlardır:
- naber (ağırlık): 100 ila 900
- genişlik (genişlik): yoğunlaştırılmış, normal, genişletilmiş
- İtalyan (italik): dikten italiğe
- öyle değil (eğimli): karakterin eğikliği
- ah (optik boyut): farklı boyutlar için optimizasyon
/* 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;
}Değişken Fontlarla Gerçek Tasarruf
| Senaryo | Geleneksel Yaklaşım | Değişken Yazı Tipi | Tasarruf |
|---|---|---|---|
| 4 ağırlık (400,500,600,700) | 4 dosya × 30KB = 120KB | 1 dosya = 48KB | %60 |
| 4 ağırlık + italik | 8 dosya × 30KB = 240KB | 1 dosya = 72KB | %70 |
| Tam ekran yazı tipi | 12 dosya = 360 KB | 1-2 dosya = 90 KB | %75 |
Yazı tipi görüntüleme stratejileri
Mülkiyet font-display tarayıcının verileri nasıl işleyeceğini kontrol eder
web yazı tipini yüklerken metin ekranı. Seçimi
Doğru strateji, FOIT (Görünmez Metin Parlaması) ve
FOUT (Stilsiz Metin Flash) ve bunların CLS ve LCP üzerindeki etkisi.
yazı tipi ekranı: takas (en yaygın)
Tarayıcı, metni hemen sistem yazı tipiyle (FOUT) görüntüler ve ardından onu değiştirir. kullanılabilir olduğunda web yazı tipiyle. FOIT yok, ancak yazı tipleri varsa potansiyel CLS farklı metrikleri var. Çoğu site için doğru seçim.
yazı tipi ekranı: isteğe bağlı (maksimum performans için)
Tarayıcı, sistem yazı tiplerindeki metni görüntüler. Web yazı tipi şuraya indirilir: arka planda ancak yalnızca çok kısa bir süre içinde (yaklaşık 100 ms) mevcutsa kullanılır. Bağlantı yavaşsa bağlantı sırasında sistem yazı tipi sonsuza kadar kullanılır oturum. FOUT yok, CLS yok, ancak web yazı tipi hiçbir zaman gösterilmeyebilir yavaş bağlantılarda. Performansın estetiği aştığı yerler için idealdir.
font-display: geri dönüş (uzlaşma)
Tarayıcının çok kısa bir engelleme süresi vardır (yaklaşık 100 ms), ardından geri dönüşü gösterir, ve yalnızca 3 saniye içinde kullanılabilir olması durumunda web yazı tipiyle değiştirilir. 3 saniye sonra, sistem yazı tipi oturum boyunca kalır. FOIT ve arasında iyi bir uzlaşma Görsel kimlik üzerinde güçlü etkisi olan yazı tipleri için FOUT.
Stratejilerin Görsel Karşılaştırması
| Strateji | Blok Dönemi | Takas Dönemi | FİT | FOUT/CLS |
|---|---|---|---|---|
| engellemek | 3s | sonsuz | Yüksek | Si |
| takas | 0ms | sonsuz | No | Si |
| geri çekilmek | 100ms | 3s | Asgari | Sınırlı |
| isteğe bağlı | 100ms | 0ms | Asgari | No |
| araba | tarayıcı karar verir | tarayıcı karar verir | Değişken | Değişken |
Geçersiz Kılma Metrikleriyle CLS Yazı Tipi Değiştirmeyi Ortadan Kaldırın
Neden olduğu CLS'yi ortadan kaldırmak için en etkili teknik font-display: swap
ve geri dönüş yazı tipi ölçümlerini web yazı tipi ölçümleriyle hizalayın. CSS özellikleri
size-adjust, ascent-override, descent-override
e line-gap-override bunu milimetrik hassasiyetle yapmanızı sağlar.
/* 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;
}Üçüncü Taraf Yazı Tipleri için Ön Bağlantı ve Ön Yükleme
Google Fonts veya diğer üçüncü taraf yazı tipi CDN'lerini, DNS ve TLS bağlantılarını kullanıyorsanız
bu alanlara yönelik gecikme eklerler. Direktifler preconnect e
preload içinde <head> bu yükü azaltın:
<!-- 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
>Uyarı: Ön yüklemeyi kötüye kullanmayın
Ön yükleme, tarayıcıya söz konusu kaynağı yüksek öncelikli olarak yüklemesini söyler. kritik CSS ve JavaScript kaynaklarıyla rekabet etmek. Ön yüklemeyi yalnızca şunun için kullanın: ekranın üst kısmındaki ana yazı tipi — genellikle ana metindeki yazı tipi düzenli ağırlık. Çok fazla yazı tipini önceden yüklerseniz performansı düşürebilirsiniz geliştirmek yerine sayfanın genelini değiştirin.
Kendi Kendini Barındırma ve Google Yazı Tipleri: Karşılaştırma
Kendi kendine barındırma ve Google Fonts arasındaki seçim çeşitli faktörlere bağlıdır. Kendi kendine barındırma daha fazla kontrol, daha iyi performans sunar ve üçüncü taraf hizmetlere bağımlılık yoktur. Google Fonts, siteler arasında kolaylık ve paylaşılan önbellekleme olanağı sunar (her ne kadar ikincisi modern tarayıcı gizlilik kısıtlamaları nedeniyle fayda sağladı ve azaldı).
Maksimum performans için değişken yazı tipleri ve özel alt kümelerle kendi kendini barındırma ve en uygun seçim. Çok fazla ödün vermeden uygulama hızı için performansı, doğru ön bağlantı direktiflerine sahip ve kabul edilebilir Google Yazı Tipleri.
/* 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 "*";
}Sonraki Adımlar
Yazı tipi optimizasyonunda uzmanlaşarak CSS'deki yenilikleri keşfetmeye hazırsınız duyarlı bileşenler oluşturma şeklimizi değiştiriyor. Sonraki Serideki makale CSS Konteyner Sorguları konusunu ele alıyor: nasıl oluşturulur yerine kaplarının boyutuna tepki veren bileşenler görünüm penceresi, yanıt veren yardımcı program sınıflarına sahip modeli geçersiz kılıyor.
Sonuçlar
Web yazı tiplerinin optimizasyonu en yüksek etkiye sahip müdahalelerden biridir. performans optimizasyonları için çaba sarfediyoruz. 400KB optimize edilmemiş yazı tipleriyle başlayın ortadan kaldırmak için metrikleri geçersiz kılarak 60 KB'lik değişken yazı tipini alt kümeye alın. CLS, tek seferlik birkaç saatlik çalışma gerektirir ancak LCP'ye göre kalıcı avantajlara sahiptir. Her ziyaretçi için CLS ve bant genişliği.
2026'da önerilen strateji: WOFF2'de değişken yazı tipleriyle kendi kendini barındırma,
Latin Genişletilmiş için alt kümeleme, font-display: swap geçersiz kılma metrikleriyle
geri dönüş yazı tipi için, e <link rel="preload"> yazı tipi için
metnin gövdesi. Bu kurulum, estetikten ödün vermeden doğal performansa ulaşır.