Web Font Optimizasyon: font-display ve FOUT/FOIT

İyi bir web font optimizasyon stratejisi, bir sayfanın hem hızlı hem de görsel olarak kararlı açılması arasındaki farkı belirler. Yazı tipleri tarayıcıya geç ulaştığında metin ya hiç görünmez (FOIT) ya da önce yedek fontla çizilip sonra sıçrayarak değişir (FOUT). Bu yazıda font-display, preload, WOFF2 ve subsetting gibi araçlarla bu davranışları nasıl kontrol edeceğinizi ve Core Web Vitals puanınızı nasıl koruyacağınızı anlatıyorum.

FOUT ve FOIT arasındaki fark

İki kısaltma da özel bir font yüklenirken yaşanan geçiş anını tarif eder:

• FOIT (Flash of Invisible Text): Tarayıcı font inene kadar metni hiç çizmez. Kullanıcı boş bir alan görür; font yavaş gelirse içerik saniyelerce görünmez kalabilir.
• FOUT (Flash of Unstyled Text): Tarayıcı önce sistem yedek fontuyla metni gösterir, özel font inince yeniden çizer. İçerik hemen okunur ama harf genişlikleri değişince gözle görülür bir kayma olur.

Genelde FOUT, FOIT'e tercih edilir: kullanıcı içeriği beklemeden okumaya başlar. Asıl mesele bu geçişi tasarlanmış ve sıçramasız hale getirmektir.

font-display ile davranışı kontrol etmek

font-display tanımlayıcısı, font inerken tarayıcının metni nasıl çizeceğini belirler ve @font-face kuralının içine yazılır:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Değerlerin pratikteki anlamı şöyledir:

• swap: Çok kısa bir blok süresinden sonra hemen yedek font gösterilir, özel font inince değişir. Klasik FOUT — metin asla görünmez kalmaz.
• block: Kısa bir süre (yaklaşık 3 sn) metin görünmez bekler, sonra yedek fonta düşer. FOIT riski yüksektir.
• fallback: Çok kısa blok + kısa değiştirme penceresi. Font geç gelirse yedekte kalır; logo ve marka tipografisi için iyi bir denge.
• optional: Tarayıcı bağlantı hızına göre fontu kullanıp kullanmamaya kendi karar verir. Düzen kaymasını (CLS) en aza indirir, gövde metni için idealdir.

Çoğu içerik sitesi için swap veya optional en güvenli seçeneklerdir.

Kritik fontları preload ile öne almak

Tarayıcı bir fontu ancak CSS'i indirip onu kullanan bir öğeyi bulduğunda keşfeder; bu da fontun geç başlamasına yol açar. <link rel="preload"> ile en kritik fontu erkenden indirmeye başlatabilirsiniz:

<link rel="preload" href="/fonts/inter-var.woff2"
      as="font" type="font/woff2" crossorigin>

İki ayrıntı önemlidir: crossorigin niteliği fontlar için zorunludur (aynı kaynaktan sunsanız bile), aksi halde tarayıcı fontu iki kez indirir. İkincisi, yalnızca ilk ekranda gerçekten kullanılan 1-2 fontu preload edin; her ağırlığı ön yüklemek bant genişliğini boşa harcar ve diğer kaynakların yükünü geciktirir.

WOFF2 ve subsetting ile dosya boyutunu küçültmek

Format seçimi en büyük kazançlardan biridir. WOFF2 bugün tüm modern tarayıcılarda desteklenir ve WOFF'a göre yaklaşık %30 daha iyi sıkıştırma sağlar. Eski TTF/OTF veya WOFF dosyalarını sunmaya gerek yok — tek format olarak WOFF2 yeterlidir.

İkinci büyük kazanç subsetting, yani fonttan yalnızca ihtiyaç duyduğunuz karakterleri tutmaktır. Tam bir font binlerce glif içerebilir; sadece Latin alfabesi kullanan bir site bunların çoğunu hiç çizmez. unicode-range ile tarayıcıya hangi aralığın hangi dosyada olduğunu söyleyebilirsiniz:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

Böylece tarayıcı, sayfada o aralıktan bir karakter yoksa dosyayı hiç indirmez. Subsetting'i glyphhanger veya fonttools'un pyftsubset aracıyla otomatik üretebilirsiniz:

pyftsubset inter.ttf \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153" \
  --flavor=woff2 \
  --output-file=inter-latin.woff2

Düzen kaymasını (CLS) önlemek

FOUT'un en sinir bozucu yanı, yedek font ile özel fontun farklı genişlikte olmasından doğan sıçramadır. Modern CSS bunu büyük ölçüde çözer. size-adjust, ascent-override ve descent-override ile bir yedek fontu özel fontunuzun metriklerine yaklaştırabilirsiniz:

@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

Sonra font-family: "Inter", "Inter-fallback", sans-serif; yazarsanız, özel font inerken neredeyse hiç kayma olmaz. Bu metrikleri elle hesaplamak yerine Fontaine gibi araçlar otomatik üretebilir.

Kontrol listesi

• Yalnızca WOFF2 sun; eski formatları bırak.
• Gerçekten kullandığın ağırlık ve stilleri yükle, gerisini at.
• Latin metin için subset uygula, unicode-range ile böl.
• İlk ekrandaki 1-2 fontu preload et (crossorigin unutma).
• Gövde metni için swap veya optional seç.
• Yedek font metriklerini size-adjust ile hizalayıp CLS'i sıfıra yaklaştır.

Sık Sorulan Sorular

font-display: swap mı optional mı kullanmalıyım?

Metnin hemen okunabilmesi öncelikse swap kullanın; özel fontunuz mutlaka görünür. Düzen kararlılığı ve CLS puanı önceliğinizse optional daha güvenlidir, çünkü tarayıcı yavaş bağlantılarda fontu hiç değiştirmeyebilir. Çoğu gövde metni için optional, başlıklar için swap iyi bir kombinasyondur.

Google Fonts mı kendi sunucumda barındırma mı daha hızlı?

Bugün genellikle kendi alanınızda barındırmak (self-hosting) daha hızlıdır. Tarayıcılar artık üçüncü taraf önbelleğini siteler arası paylaşmadığı için Google Fonts'un eski avantajı kayboldu; ayrıca ek bir alan adına bağlanmak DNS ve TLS gecikmesi ekler. WOFF2 dosyalarını indirip kendi sunucunuzdan preload ile sunmak hem daha hızlı hem de gizlilik açısından daha temizdir.

Değişken fontlar performansı kötüleştirir mi?

Genelde tam tersi. Tek bir değişken font dosyası, ayrı ayrı indirdiğiniz birçok ağırlığın yerini alır; üç-dört ağırlık kullanıyorsanız toplam boyut çoğu zaman düşer. Yalnızca tek bir ağırlık ve stil kullanacaksanız statik bir subset daha küçük olabilir.

Fontlarınız sayfanızı yavaşlatıyor ya da metin sıçraması mı yaşıyorsunuz? Sitenizin yükleme performansını ve tipografisini birlikte elden geçirelim. Benimle iletişime geçin.