Neden sorun çıkarır?
Web yazı tipleri indirilene kadar metin ya görünmez ya da yedek yazı tipiyle gösterilir. İkinci durumda yazı tipi yüklendiğinde metin yeniden çizilir ve düzen kayması oluşur.
İki sorun
| Durum | Kısaltma | Etkisi |
|---|---|---|
| Metin görünmez bekleme | FOIT | Kullanıcı boş alan görür, LCP gecikir |
| Yedek yazı tipiyle gösterip değiştirme | FOUT | Metin zıplar, CLS artar |
Çözüm adımları
- font-display: swap kullanın. Metin hemen görünür, yazı tipi gelince değişir
- Yazı tipi sayısını sınırlayın. Her aile ve kalınlık ayrı dosyadır
- Modern format kullanın. WOFF2 en verimli biçimdir
- Kritik yazı tipini preload edin
- Alt küme (subset) oluşturun. Yalnızca kullandığınız karakterler — Türkçe karakterleri dâhil etmeyi unutmayın
- Kendi sunucunuzdan servis edin. Dış bağlantı ve ek DNS çözümlemesi ortadan kalkar
- Yedek yazı tipini yakın seçin. Boyut farkı azsa kayma da az olur
Kaç yazı tipi kullanılmalı?
Tipik bir sitede iki aile (başlık ve gövde) ve aile başına 2-3 kalınlık yeterlidir. Yaygın hata, tasarım aşamasında seçilen 6-8 varyantın hepsinin yüklenmesidir.
Her ek varyant ayrı bir dosya indirimi demektir.
Türkçe karakter uyarısı
Alt küme oluştururken Türkçe karakterlerin (ç, ğ, ı, İ, ö, ş, ü) dâhil edildiğinden emin olun. Aksi hâlde bu harfler yedek yazı tipiyle görüntülenir ve metin bozuk görünür.
Sistem yazı tipi alternatifi
En hızlı yazı tipi, hiç indirilmeyendir. Sistem yazı tipi yığını kullanmak:
- Sıfır indirme süresi
- Düzen kayması yok
- Her platformda yerel görünüm
Marka kimliği için özel yazı tipi şart değilse, bu seçenek performans açısından tartışmasız üstündür.
Ne anlama gelir?
Yazı tipi optimizasyonu (font optimization), web fontlarının sayfa metnini geciktirmeden veya kaydırmadan yüklenmesini sağlama çalışmasıdır. Kötü yönetilen fontlar, metnin bir süre görünmemesine (FOIT) veya ani font değişimine (FOUT) yol açar; bu da hem deneyimi hem Core Web Vitals'ı olumsuz etkiler. Font optimizasyonu, bu sorunları önleyen bir hız çalışmasıdır.
Yaşanan sorunlar
- FOIT: Font gelene kadar metnin hiç görünmemesi
- FOUT: Önce yedek fontun, sonra asıl fontun görünüp kaymaya yol açması
- Düzen kaymaları (CLS) ve gecikmeli metin
Çözümler
Font optimizasyonunun temel araçları şunlardır: font-display: swap ile metni hemen (yedek fontla) göstermek, kritik fontu preload ile öne almak, mümkünse sistem fontlarını kullanmak ve fontları alt kümelere (subset) bölerek yalnızca gereken karakterleri yüklemek. Ayrıca birkaç font ağırlığıyla yetinmek, gereksiz font dosyalarını yüklemekten kaçınmak sayfayı hafifletir.
Gerçek örnek
Bir site, üçüncü taraf bir fontu geç yüklediği için metin bir süre görünmüyor, sonra ani bir kaymayla beliriyordu. Kritik fonta preload ve font-display: swap uygulandığında, metin hemen görünür oldu ve düzen kayması ortadan kalktı.
Özet
Yazı tipi optimizasyonu, web fontlarının metni geciktirmeden yüklenmesini sağlar. FOIT/FOUT ve düzen kaymalarını önler; font-display: swap, preload, alt küme kullanımı ve fontları hafif tutmakla yapılır. Hem deneyimi hem Core Web Vitals'ı iyileştirir.