@sammytürkçesi "yüklenir yazıyüzleri" ya da "indirilebilir yazı tipleri". kavramı bilen için asıl soru "nasıl kullanılır" değil "nasıl hızlı kullanılır", çünkü yazı tipi indirme çoğu sitede en büyük performans kaybı.
kontrol listesi:
1. sadece kullandığın ağırlıkları yükle. dört ağırlık (400, 500, 600, 700) dört ayrı dosya demek; çoğu site iki ağırlıkla idare eder. değişken yazı tipi (variable font) varsa tek dosya tüm ağırlıkları taşır.
2. alt küme çıkar. google fonts adresine text parametresi ekleyerek sadece belirli karakterleri, ya da subset ile latin-ext alt kümesini alabilirsin. türkçe için latin-ext şart; yoksa ş ve ğ harfleri başka yazı tipinden gelir ve metin kirli görünür.
3. en önemli yazı tipini preload et. head içinde link rel=preload ile tarayıcıya css'i beklemeden indirmeye başlamasını söylüyorsun; ilk boyama süresi belirgin düşüyor.
4. font-display: swap veya optional. swap, metni hemen gösterip sonra değiştirir; optional, yazı tipi zamanında gelmezse o sayfa için hiç kullanmaz (düzen kayması sıfır). seo tarafında core web vitals'ın cls metriği tam burada devreye giriyor; yazı tipi değişince satırlar kayıyorsa puan düşüyor. size-adjust ve ascent-override ile fallback yazı tipini asıl yazı tipine yaklaştırmak kaymayı azaltıyor.
5. kendi sunucundan sun. üçüncü taraf bağlantı maliyeti (dns, tls) ve gizlilik derdi ortadan kalkıyor; woff2 dosyalarını uzun süreli cache başlığıyla ver.
bunları yapan bir sitede yazı tipi yükü genelde 50 ile 80 kilobayt arasına iniyor; yapmayanda 400 kilobaytı aşıyor.
kontrol listesi:
1. sadece kullandığın ağırlıkları yükle. dört ağırlık (400, 500, 600, 700) dört ayrı dosya demek; çoğu site iki ağırlıkla idare eder. değişken yazı tipi (variable font) varsa tek dosya tüm ağırlıkları taşır.
2. alt küme çıkar. google fonts adresine text parametresi ekleyerek sadece belirli karakterleri, ya da subset ile latin-ext alt kümesini alabilirsin. türkçe için latin-ext şart; yoksa ş ve ğ harfleri başka yazı tipinden gelir ve metin kirli görünür.
3. en önemli yazı tipini preload et. head içinde link rel=preload ile tarayıcıya css'i beklemeden indirmeye başlamasını söylüyorsun; ilk boyama süresi belirgin düşüyor.
4. font-display: swap veya optional. swap, metni hemen gösterip sonra değiştirir; optional, yazı tipi zamanında gelmezse o sayfa için hiç kullanmaz (düzen kayması sıfır). seo tarafında core web vitals'ın cls metriği tam burada devreye giriyor; yazı tipi değişince satırlar kayıyorsa puan düşüyor. size-adjust ve ascent-override ile fallback yazı tipini asıl yazı tipine yaklaştırmak kaymayı azaltıyor.
5. kendi sunucundan sun. üçüncü taraf bağlantı maliyeti (dns, tls) ve gizlilik derdi ortadan kalkıyor; woff2 dosyalarını uzun süreli cache başlığıyla ver.
bunları yapan bir sitede yazı tipi yükü genelde 50 ile 80 kilobayt arasına iniyor; yapmayanda 400 kilobaytı aşıyor.