font-display: swap Kullanımı

PageSpeed Insights raporunda "Web fontları yüklenirken metnin görünür kalmasını sağlayın" uyarısını gördüyseniz, çözümü tek bir CSS satırıdır: font-display: swap. Bu özellik, tarayıcının bir web fontu indirilirken metni nasıl davranacağına karar verir ve varsayılan davranışı çoğu sitede kullanıcının aleyhinedir. Varsayılan ayarla tarayıcı, font gelene kadar metni hiç çizmez; ziyaretçi boş bir kutuya bakar ve LCP ölçümünüz bu boşluk kadar gecikir.

Bu yazıda font-display özelliğinin beş değerini, hangisinin hangi durumda doğru olduğunu, swap seçince ortaya çıkan sıçrama sorununu nasıl ortadan kaldıracağınızı ve Google Fonts kullanıyorsanız bu ayarı nereden vereceğinizi anlatacağım. Kod örnekleri doğrudan kopyalanabilir; yaklaşım hem WordPress temaları hem de kendi yazdığınız CSS için aynıdır.

Font Yükleme Zaman Çizelgesi: Block, Swap, Failure#

font-display değerlerini anlamak için tarayıcının font beklerken geçirdiği üç dönemi bilmek gerekir. Spesifikasyon bunları isimlendirir ve her değer bu dönemlerin uzunluğunu değiştirir:

• Block dönemi: Tarayıcı metni çizmez, yeri boş bırakır. Font bu sürede gelirse doğrudan onunla çizer.
• Swap dönemi: Tarayıcı metni yedek fontla çizer. Asıl font bu sürede gelirse hemen değiştirir.
• Failure dönemi: Süre dolmuştur; asıl font gelse bile o sayfa görünümünde artık kullanılmaz.

Bu üç dönemin uzunluğu değere göre şöyle değişir:

Tablodaki en kritik satır swap'tır: block süresi sıfırdır, yani metin daima ilk boyamada ekrana gelir. Bu, arama motorlarının ölçtüğü LCP metriği için doğrudan kazançtır. auto değeri ise varsayılandır ve tarayıcıya bırakıldığında pratikte block gibi davranır; yani hiçbir şey yazmamak, en kötü seçeneği seçmek anlamına gelir.

En Basit Uygulama#

Kendi @font-face bloklarınızı yazıyorsanız iş tek satırla biter. Fontun her ağırlığı için ayrı blok tanımladığınızı unutmayın; font-display her bloğa ayrı ayrı yazılmalıdır:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;   /* metin asla görünmez kalmaz */
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;   /* bold için de ayrıca yazılmalı */
}

Bu ayarı unutmanın en sık görüldüğü yer, hazır temaların içinde gelen font CSS dosyalarıdır. Temanın kendi fonts.css dosyasını değiştirmek güncellemede kaybolacağı için, çocuk tema (child theme) ya da kendi ek CSS dosyanız üzerinden aynı @font-face bloklarını font-display: swap ile yeniden tanımlamanız daha kalıcı bir çözümdür.

Fontları kendi sunucunuzda barındırmıyorsanız bu satırı yazacak bir yeriniz olmayabilir. O durumda fontu indirip yerelleştirmek en temiz yoldur; nasıl yapılacağını web font yükleme optimizasyonu yazısında adım adım anlattım.

Google Fonts ve Diğer Sağlayıcılarda swap Vermek#

Google Fonts'u doğrudan CDN'den kullanıyorsanız @font-face bloğu size ait değildir; Google'ın döndürdüğü CSS içindedir. Neyse ki API bunu parametreyle destekler. URL'nin sonuna &display=swap eklemek yeterlidir:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">

Buradaki preconnect satırı da önemlidir: font dosyaları fonts.googleapis.com değil fonts.gstatic.com alan adından gelir, dolayısıyla asıl bağlantı maliyeti orada doğar. Bağlantı ipuçlarının nasıl çalıştığını preload, prefetch ve preconnect farkı yazısında karşılaştırdım.

Bir CSS dosyasını hiç değiştiremiyorsanız (örneğin bir eklenti tarafından üretiliyorsa) son çare, aynı font-family adıyla kendi @font-face bloğunuzu daha sonra tanımlamak ya da eklentinin font yükleme ayarını kapatıp fontu kendiniz eklemektir. WordPress'te birçok performans eklentisi "Google Fonts'u yerelleştir" seçeneğiyle bu işi otomatik yapar.

swap'ın Bedeli: Düzen Kayması#

swap görünmez metni ortadan kaldırır ama karşılığında bir maliyet getirir: yedek fontla çizilen metin, asıl font geldiğinde yeniden çizilir. İki fontun harf genişlikleri farklıysa satır sonları değişir, paragraf yüksekliği kayar ve altındaki her şey aşağı yukarı zıplar. Bu, Core Web Vitals'ın CLS metriğine doğrudan yazılır.

Çözüm fontu bırakmak değil, yedek fontu asıl fonta metrik olarak yaklaştırmaktır. CSS'in size-adjust, ascent-override ve descent-override özellikleri tam bunun içindir. Yerel bir sistem fontunu temel alıp metriklerini ayarlarsınız:

/* Yedek font: yerel Arial'ı asıl fontun metriklerine yaklaştır */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue");
  size-adjust: 107%;        /* harf yüksekliğini büyüt */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body {
  /* Sıra önemli: asıl font, ayarlanmış yedek, sistem fontu */
  font-family: "Inter", "Inter Fallback", system-ui, sans-serif;
}

Doğru size-adjust yüzdesini bulmak deneme yanılma işidir ama yöntem basittir: bir paragrafı önce yalnızca yedek fontla, sonra yalnızca asıl fontla ölçüp yüksekliklerin eşitlendiği değeri ararsınız. Fark %2'nin altına indiğinde sıçrama gözle fark edilmez hale gelir. Düzen kaymasının diğer kaynaklarını CLS düzen kayması nasıl düzeltilir yazısında topladım.

Hangi Değeri Ne Zaman Seçmelisin#

Her font aynı öneme sahip değildir; bu yüzden tek bir değeri her yere uygulamak yerine fontun rolüne göre karar vermek daha iyi sonuç verir.

optional değeri az bilinen ama çok güçlü bir seçenektir. Tarayıcı fonta yaklaşık 100 ms şans verir; gelmezse o sayfa görünümünde hiç kullanmaz ve indirmeyi arka planda tamamlayıp önbelleğe koyar. Sonuç: ilk ziyaret hızlı ve sıfır CLS, ikinci ziyaret tasarımın kendi fontuyla. Marka fontunun ilk ekranda mutlaka görünmesi gerekmiyorsa optional çoğu zaman en dengeli seçimdir.

İkon fontlarında ise swap doğrudan zararlıdır: yedek fontta o kod noktalarının karşılığı olmadığı için ekranda boş kutular ya da rastgele harfler belirir. Bu yüzden ikon fontları için block kullanın veya daha iyisi, ikonları satır içi SVG'ye çevirip fontu tamamen kaldırın.

Sık Yapılan Hatalar#

Sahada gördüğüm hataların neredeyse tamamı şu beş başlıkta toplanıyor:

1. Yalnızca bir @font-face bloğuna yazmak. Regular'a swap verip bold'u unutmak, kalın başlıkların hâlâ görünmez kalmasına yol açar. Her bloğa ayrı yazın.
2. font-display ile preloadu karıştırmak. İkisi farklı problemi çözer: preload fontu daha erken indirir, font-display ise beklerken ne yapılacağını söyler. Yavaş bir font için ikisi de gerekir.
3. Yedek font listesini boş bırakmak. font-family: "Inter"; yazıp sonuna sans-serif eklemezseniz, swap dönemi boyunca tarayıcı kendi varsayılan serif fontunu kullanır ve sayfa tanınmaz hale gelir.
4. Kritik olmayan fonta block vermek. Dekoratif bir başlık fontu için block seçmek, sayfanın en görünür öğesini üç saniye boş bırakabilir.
5. CLS'i ölçmeden swap eklemek. Görünmez metin sorunu çözülür ama CLS puanı kötüleşebilir. Değişiklikten sonra iki metriği birlikte ölçün.

Değişikliğin gerçekten uygulandığını doğrulamak için üretilen CSS'i kontrol edin:

# Yayındaki stil dosyasında font-display satırlarını say
curl -s https://firmaniz.com/assets/style.css | grep -c "font-display"

# Google Fonts kullanıyorsanız CSS'in swap ile geldiğini doğrulayın
curl -s "https://fonts.googleapis.com/css2?family=Inter&display=swap" \
  | grep -m1 "font-display"
# Beklenen çıktı: font-display: swap;

Ölçüm ve Doğrulama#

Değişikliği yaptıktan sonra üç şeye bakın. Birincisi, tarayıcının geliştirici araçlarında sayfayı yavaş ağ profilinde yeniden yükleyip metnin ilk boyamada görünüp görünmediğini gözlemleyin; swap çalışıyorsa metin anında yedek fontla gelir. İkincisi, Performance sekmesinde kaydettiğiniz izde LCP işaretinin nereye düştüğünü kontrol edin. Üçüncüsü, Layout Shift olaylarının font değişimiyle aynı ana denk gelip gelmediğine bakın.

Saha verisi laboratuvar verisinden daha değerlidir. PageSpeed Insights'ın üst kısmındaki CrUX bölümü gerçek kullanıcı ölçümlerini gösterir ve font değişikliğinin etkisi burada 28 günlük pencere dolduktan sonra görünür. Bu yüzden değişikliği yapıp ertesi gün "hiçbir şey değişmemiş" demeyin. Genel hız ölçüm yöntemi için GTmetrix ile WordPress hız testi yazısındaki adımları izleyebilirsiniz; LCP'yi ayrıca iyileştirmek istiyorsanız LCP nasıl iyileştirilir rehberi bu yazının doğal devamıdır.

Sıkça Sorulan Sorular#

font-display swap SEO'yu etkiler mi#

Dolaylı olarak etkiler. swap metnin ilk boyamada görünmesini sağladığı için LCP metriğini iyileştirir ve LCP, Google'ın sayfa deneyimi sinyalleri arasındadır. Ayrıca PageSpeed Insights'taki "metnin görünür kalmasını sağlayın" uyarısı bu satırla kapanır. Ancak swap tek başına sıralama getirmez; içerik kalitesi ve genel sayfa hızıyla birlikte değerlendirilir.

swap yerine optional kullanmalı mıyım#

Marka fontunun ilk ziyarette mutlaka görünmesi gerekmiyorsa optional daha iyidir. Bu değerle tarayıcı fonta yaklaşık 100 ms şans verir, gelmezse o görünümde hiç kullanmaz ve sıfır düzen kayması olur; font arka planda indirilip önbelleğe alındığı için ikinci ziyarette zaten doğru fontla açılır. Kurumsal kimliğin ilk saniyeden itibaren görünmesi şartsa swap tercih edin.

font-display eklediğim halde uyarı neden kaybolmuyor#

Genellikle bir font dosyası gözden kaçmıştır. Sayfada birden fazla kaynaktan font gelebilir: temanız, bir eklenti, gömülü bir üçüncü taraf widget'ı veya ikon fontu. Geliştirici araçlarının Network sekmesinde filtreyi Font yapıp gelen tüm dosyaları listeleyin, her birinin hangi CSS'ten geldiğini bulun ve o CSS'e de font-display ekleyin. Üçüncü taraf widget'larının CSS'ini değiştiremiyorsanız o widget'ı geciktirerek yüklemek tek çözümdür.

font-display ile preload aynı işi mi yapıyor#

Hayır, ikisi tamamen farklı katmanlarda çalışır. preload, fontun ne zaman indirilmeye başlanacağını öne çeker ve keşif gecikmesini azaltır. font-display ise font henüz gelmemişken metnin nasıl çizileceğini belirler. Yavaş bir bağlantıda ikisini birlikte kullanmak gerekir; sadece preload eklerseniz font geç gelirse metin yine görünmez kalır.

Ne kadar sürede sonuç alırım#

Teknik etki anında görünür: değişikliği yayınladıktan sonra sayfayı önbelleksiz yenilediğinizde metin ilk boyamada gelmeye başlar. Laboratuvar testleri (Lighthouse, GTmetrix) de aynı gün düzelir. Ancak Search Console'daki Core Web Vitals raporu 28 günlük hareketli pencere kullandığı için saha verisinde iyileşmenin tam yansıması üç-dört haftayı bulur.

İkon fontlarında da swap kullanmalı mıyım#

Hayır, ikon fontlarında swap zararlıdır. Yedek fontta ikon kod noktalarının karşılığı olmadığı için ekranda boş kutular veya alakasız harfler belirir; kullanıcı bunu bozuk sayfa olarak algılar. İkon fontları için block daha güvenlidir. En iyi çözüm ise ikon fontunu tamamen bırakıp ihtiyacınız olan birkaç simgeyi satır içi SVG olarak koymaktır; hem daha hafif hem de bu sorunu kökten ortadan kaldırır.

Kapanış#

font-display, tek satırla ölçülebilir kazanç sağlayan ender CSS özelliklerinden biridir. Aklınızda kalması gereken dört şey var: varsayılan auto değeri pratikte metni görünmez bırakır, bu yüzden hiçbir şey yazmamak en kötü seçenektir; gövde ve başlık fontları için swap, ikon fontları için block, dekoratif fontlar için optional doğru tercihtir; her @font-face bloğuna ayrı ayrı yazmanız gerekir; ve swap sonrası oluşabilecek sıçramayı size-adjust ile yedek fontu hizalayarak ortadan kaldırırsınız.

Fontlarınızı yerelleştirmek, önbellek başlıklarını kurmak ve bu tür performans ayarlarını sunucu tarafında oturtmak istiyorsanız Clou.TR altyapısı bu işi kolaylaştırır. LiteSpeed önbelleği hazır gelen WordPress hosting ve web hosting paketlerimizle statik kaynaklarınız doğru başlıklarla servis edilir; kendi yapılandırmanızı kurmak isterseniz VDS sunucu tercih edebilir, ayarların bize bırakılmasını isterseniz sunucu yönetimi hizmetimizden yararlanabilirsiniz.