FOUT ve FOIT: Web Font Sorunlarının Temel Nedenleri
Web fontlar, sitenizin görsel kimliğini güçlendirir ancak yanlış yapılandırıldığında kullanıcı deneyimini olumsuz etkileyebilir. FOUT (Flash of Unstyled Text), font yüklenene kadar geçici olarak yedek fontun görünmesi; FOIT (Flash of Invisible Text) ise font yüklenene kadar metnin tamamen gizlenmesidir. Bu sorunlar özellikle yavaş bağlantılarda sayfanın algılanan performansını düşürür. Aşağıdaki pratik ipuçları ve kontrol listesi, bu sorunları minimize etmenize yardımcı olacak.
Font Yükleme Stratejilerini Doğru Seçin
Fontların nasıl yükleneceği, FOUT ve FOIT üzerinde doğrudan etkilidir. İşte dikkat etmeniz gereken temel yaklaşımlar:
- font-display: swap: Font yüklenene kadar yedek fontu hemen gösterir, ardından değiştirir. FOUT'a neden olur ancak metin her zaman okunabilir.
- font-display: block: Font yüklenene kadar metni gizler (FOIT), ardından gösterir. Kısa bir zaman aşımı süresi vardır.
- font-display: optional: Fontun çok hızlı yüklenmesini bekler, yoksa yedek font kalıcı olarak kullanılır. FOIT riskini azaltır ancak font hiç yüklenmeyebilir.
Çoğu durumda font-display: swap en dengeli seçenektir. Ancak tasarımın fonta bağımlı olduğu durumlarda (örneğin logolar) font-display: block tercih edilebilir. Hızlı bir iç link ile Next.js render stratejileri sayfasında kritik kaynakların nasıl yönetileceğine dair daha fazla bilgi bulabilirsiniz.
Fontları Ön Yükleme (Preload) ile Hızlandırın
Tarayıcının font dosyasını erken keşfetmesini sağlamak için <link rel="preload"> kullanın. Bu, fontların kritik render yoluna girmesini sağlar. Örnek:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>Ancak dikkatli olun: Gereksiz preload, diğer kaynakların bant genişliğini çalabilir. Yalnızca kritik fontları (örneğin başlıklar için kullanılan) ön yükleyin.
Font Alt Kümesi (Subset) Kullanın
Font dosyasının boyutunu küçültmek, yükleme süresini doğrudan azaltır. Yalnızca kullanacağınız karakterleri içeren bir alt küme oluşturun. Araçlar: glyphhanger, FontSquirrel veya Google Fonts'ın CSS API'si (text parametresi). Örneğin: https://fonts.googleapis.com/css2?family=Roboto&text=Hello sadece "Hello" karakterlerini yükler.
WOFF2 Formatını Tercih Edin
WOFF2, en iyi sıkıştırma oranını sunar ve modern tarayıcılar tarafından desteklenir. Eski tarayıcılar için WOFF veya TTF yedekleri ekleyin. CSS'de @font-face içinde birden fazla format belirterek tarayıcının uygun olanı seçmesini sağlayın.
Kritik CSS ile Font Yüklemeyi Erteleyin
Sayfanın ilk görünen kısmı (above-the-fold) için fontları kritik CSS içinde satır içi olarak ekleyin. Geri kalan fontları media="print" veya onload ile erteleyin. Bu teknik, ilk boyamanın hızlanmasını sağlar. React 19 Server Components ile kritik olmayan font yüklemelerini sunucu tarafında yöneterek istemci tarafı yükünü azaltabilirsiniz.
Yedek Fontları Doğru Yapılandırın
Yedek font ailesi, font yüklenene kadar görüneceği için sayfa düzeninin korunması kritiktir. font-family tanımında sona eklenecek genel bir yedek (ör. sans-serif) ve mümkünse işletim sisteminde bulunan bir font belirtin. Ayrıca size-adjust ve ascent-override gibi @font-face tanımlayıcıları ile yedek fontun oranlarını ayarlayarak metin kaymasını (layout shift) önleyin.
FOUT ve FOIT Arasında Seçim Yaparken Tablo ile Karşılaştırma
| Özellik | FOUT (font-display: swap) | FOIT (font-display: block) |
|---|---|---|
| Metin görünürlüğü | Hemen yedek fontla görünür | Font yüklenene kadar gizli |
| Kullanıcı deneyimi | Metin okunabilir ancak stil değişir | Metin aniden belirir, daha rahatsız edici olabilir |
| Layout shift | Yedek font farklı boyutlardaysa kayma olabilir | Metin gizli olduğu için kayma yok, ancak font yüklenince düzen değişebilir |
| Performans algısı | Sayfa hızlı görünür, font sonradan yüklenir | Sayfa yavaş görünebilir (boş alanlar) |
Kontrol Listesi: Web Font Optimizasyonu Adımları
- Font dosyalarını WOFF2'ye dönüştürün ve uygun yedekler ekleyin.
- Gereksiz karakterleri kaldırmak için font alt kümesi oluşturun.
font-display: swapkullanarak varsayılan davranışı belirleyin.- Yalnızca kritik fontları
rel="preload"ile ön yükleyin. - Yedek fontların
size-adjustgibi parametrelerle hizalanmasını sağlayın. - Above-the-fold fontları kritik CSS'e ekleyin, geri kalanı erteleyin.
- Google Fonts gibi harici servislerden yüklenen fontlar için
display=swapparametresini ekleyin. - Sayfa yüklendikten sonra fontları yüklemek için JavaScript ile
document.fonts.readykullanmayı değerlendirin. - Lighthouse veya WebPageTest ile fontların neden olduğu layout shift ve yükleme süresini test edin.
Sık Yapılan Hatalar ve Kaçınılması Gerekenler
- Tüm fontları preload yapmak: Bu, diğer kritik kaynakların bant genişliğini azaltır.
- font-display kullanmamak: Varsayılan davranış (genellikle block) FOIT'a neden olur.
- Çok fazla font ailesi kullanmak: Her ek font yükleme süresini artırır. Mümkünse 2-3 farklı aileyle sınırlayın.
- Font dosyasını optimize etmemek: Alt küme ve sıkıştırma yapılmamış fontlar gereksiz büyük olur.
Bu ipuçlarını uygulayarak web fontlarınızın kullanıcı deneyimine katkısını artırabilir, sayfa performansını iyileştirebilirsiniz. Unutmayın, her projenin ihtiyacı farklıdır; bu nedenle test yaparak en uygun stratejiyi belirleyin.
Sık Sorulan Sorular
FOUT ve FOIT arasındaki temel fark nedir?
FOUT (Flash of Unstyled Text), font yüklenene kadar yedek fontun görünmesi; FOIT (Flash of Invisible Text) ise font yüklenene kadar metnin tamamen gizlenmesidir. FOUT, metni okunabilir tutarken stil değişimine; FOIT ise boş alan algısına neden olur.
font-display: swap her zaman iyi bir seçim midir?
Genellikle evet, çünkü kullanıcının metni hemen görmesini sağlar. Ancak tasarımın fonta bağımlı olduğu durumlarda (örneğin özel ikon fontları) font-display: block daha uygun olabilir. Her durumda test yapmanız önerilir.
Web fontlarını preload yapmak performansı her zaman artırır mı?
Hayır. Yalnızca kritik fontlar (örneğin başlıklar) preload edilmelidir. Tüm fontları preload yapmak diğer önemli kaynakların bant genişliğini çalarak genel performansı düşürebilir.
Google Fonts kullanırken FOUT/FOIT sorununu nasıl önleyebilirim?
Google Fonts CSS URL'sine <code>&display=swap</code> parametresini ekleyerek <code>font-display: swap</code> davranışını etkinleştirebilirsiniz. Örnek: <code>https://fonts.googleapis.com/css2?family=Roboto&display=swap</code>.
Font alt kümesi oluşturmak neden önemlidir?
Font dosyası boyutunu önemli ölçüde azaltır. Örneğin, yalnızca Latin karakterleri içeren bir alt küme, tam fontun %10-20'si kadar olabilir. Bu, özellikle mobil cihazlarda yükleme süresini kısaltır.
