Font-Display: Swap Özelliği

Font-display: swap, web fontunun indirilmesi süresince sistem fontunu fallback olarak göstererek metnin anında görünür olmasını sağlayan CSS kuralıdır. 2026 verilerine göre font-display: swap uygulanmayan sitelerde metin görünmezlik süresi (FOIT) ortalama 1.2 saniyeye ulaşmakta ve LCP elemanı metin bazlı olan sayfalarda bu süre doğrudan sıralama metriğine yansımaktadır. Kullanıcının boş bir ekrana baktığı her milisaniye, hem deneyim kalitesini hem de Core Web Vitals performansını aşındırır.

FOIT ve FOUT Kavramlarının Teknik Tanımı

FOIT (Flash of Invisible Text), tarayıcının web fontu indirilene kadar metni tamamen görünmez kılmasıdır. Kullanıcı sayfayı açar, layout oluşur ancak metin alanları boş görünür. Font indirildikten sonra metin aniden belirir. Bu davranış, kullanıcının sayfanın bozuk olduğunu düşünmesine ve sayfayı terk etmesine neden olabilir.

FOUT (Flash of Unstyled Text), tarayıcının web fontu indirilene kadar sistem fontunu gösterip, font hazır olduğunda web fontuna geçiş yapmasıdır. Kullanıcı metni anında görür ancak font değişimi sırasında anlık bir görsel titreme yaşar. Bu iki davranış arasındaki tercih, performans ve görsel tutarlılık dengesini belirler. SEO ve performans perspektifinden FOUT, FOIT'a her koşulda tercih edilmelidir; çünkü metin görünür olduğu anda LCP zamanlayıcısı durur.

font-display Özelliğinin Beş Değeri ve Davranış Farkları

CSS font-display özelliği beş farklı değer alır ve her biri tarayıcının font yükleme sürecinde nasıl davranacağını belirler. Bu değerler, block period (metin görünmez kalma süresi) ve swap period (fallback font gösterilme süresi) kavramlarıyla tanımlanır.

auto değeri, tarayıcının varsayılan davranışını uygular; çoğu tarayıcıda bu FOIT'tur. block değeri, kısa bir block period (genellikle 3 saniye) tanımlar ve bu süre boyunca metin görünmez kalır. swap değeri, block period'u neredeyse sıfıra indirir ve sınırsız swap period tanımlar; metin anında fallback fontla gösterilir ve web fontu ne zaman gelirse geçiş yapılır. fallback değeri, çok kısa bir block period (100 ms) ve kısa bir swap period (3 saniye) tanımlar; font 3 saniye içinde yüklenmezse sayfa ömrü boyunca fallback fontla kalır. optional değeri ise tarayıcıya fontu yükleyip yüklememekte tamamen serbest bırakır; yavaş bağlantılarda font hiç yüklenmeyebilir.

swap Değerinin SEO ve Performans Gerekçesi

font-display: swap değeri, LCP optimizasyonunun doğrudan bileşenidir. LCP elemanı bir başlık veya metin bloğu olduğunda, bu metnin ekranda görünme süresi LCP metriğini belirler. swap olmadan tarayıcı, web fontu indirilene kadar metni görünmez kılar ve LCP zamanlayıcısı font indirme süresine bağımlı hale gelir.

3G bağlantıda 50 KB'lık bir font dosyasının indirilmesi 1-2 saniye sürebilir. Bu süre boyunca metin görünmezse, LCP 3-4 saniyeye çıkar ve Google'ın "kötü" eşiğini aşar. swap uygulandığında metin, sistem fontuyla anında görünür ve LCP yalnızca HTML/CSS render süresine bağlı kalır. Font indirildiğinde görsel geçiş yapılır ancak bu geçiş LCP ölçümünü etkilemez. Dolayısıyla swap, metin bazlı LCP'yi font indirme süresinden tamamen bağımsız hale getirir.

@font-face Kuralında swap Uygulaması

font-display: swap kuralı, CSS @font-face bloğu içinde tanımlanır. Her font ailesi ve font ağırlığı için ayrı ayrı belirtilmelidir:

    
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-regular.woff2') format('woff2'),
       url('/fonts/inter-regular.woff') format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-bold.woff2') format('woff2'),
       url('/fonts/inter-bold.woff') format('woff');
}      
    

Her @font-face bloğunda font-display ayrı ayrı belirtilmelidir. Bir bloğa eklenen swap, diğer bloklara otomatik olarak uygulanmaz. Bu detay sıklıkla gözden kaçar ve yalnızca regular ağırlığa swap uygulanırken bold veya italic versiyonlar FOIT davranışı sergilemeye devam eder.

Google Fonts Entegrasyonunda swap Parametresi

Google Fonts API, URL parametresiyle font-display değerini doğrudan destekler. display=swap parametresi, API'nin döndürdüğü @font-face kurallarına otomatik olarak font-display: swap ekler:

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

Bu parametreyi eklememek, Google Fonts'un varsayılan davranışını uygular ve metin FOIT ile görünmez kalır. Google Fonts kullanan her projede display=swap parametresinin URL'de yer aldığını doğrulamak, temel bir kontrol adımıdır. Bu parametreyi eklemeyi unutmak, teknik açıdan basit ancak etkisi büyük bir hatadır.

Self-Hosted Font Yapılandırmasında swap Entegrasyonu

Fontları kendi sunucusundan barındırmak (self-hosting), Google Fonts'a kıyasla üçüncü parti bağımlılığı ortadan kaldırır ve preconnect ihtiyacını azaltır. Self-hosted fontlarda font-display: swap doğrudan CSS dosyasında tanımlanır. Ek olarak, font dosyalarının WOFF2 formatında sunulması dosya boyutunu %30 oranında küçültür.

Self-hosted font yapılandırmasının tam örneği:

    
@font-face {
  font-family: 'BrandFont';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/brand-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F;
}   
    

unicode-range özelliği, fontun yalnızca belirtilen karakter aralığı için yüklenmesini sağlar. Latin karakterleri kullanan bir sayfada Kiril veya Arapça glif'lerini içeren font dosyasının indirilmesini önler. Bu optimizasyon, font dosya boyutunu karakter seti bazında %40-60 küçültebilir ve indirme süresini doğrudan kısaltır.

Font Preload ile swap Stratejisinin Birleştirilmesi

font-display: swap metni anında gösterir ancak font dosyasının indirme süresini kısaltmaz. Font preload, tarayıcının font dosyasını CSS parse'ından önce keşfetmesini sağlayarak indirme süresini öne çeker. Bu iki tekniğin birlikte uygulanması, hem anında metin görünürlüğünü hem de hızlı font yüklemeyi garanti eder:

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

crossorigin attribute'ü, font preload'unda zorunludur. Bu attribute olmadan tarayıcı, preload isteği ile @font-face isteğini farklı origin politikalarıyla değerlendirir ve fontu iki kez indirir. Preload, yalnızca above-the-fold bölümünde kullanılan font dosyalarına uygulanmalıdır. Tüm font ağırlıklarını ve stillerini preload etmek, kritik kaynaklar arasında gereksiz ağ rekabeti yaratır.

Fallback Font Metrik Uyumu ve CLS Önleme

swap değerinin getirdiği temel ticaret, font geçişi sırasında oluşan layout shift'tir. Sistem fontu (Arial, Helvetica, Times New Roman) ile web fontu arasında metrik farklar vardır: karakter genişlikleri, satır yükseklikleri ve harf aralıkları farklıdır. Bu farklar, font swap gerçekleştiğinde metnin boyutunu değiştirir ve çevresindeki elemanlar kayar. Bu kayma, CLS skoruna doğrudan eklenir.

CSS size-adjust, ascent-override, descent-override ve line-gap-override kuralları, fallback fontun metriklerini web fontuna yaklaştırarak bu kaymayı minimize eder:

    
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Inter-Fallback';
  src: local('Arial');
  size-adjust: 107.64%;
  ascent-override: 90.49%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}

body {
  font-family: 'Inter', 'Inter-Fallback', sans-serif;
}
    

Bu yapıda Inter-Fallback, Arial fontunun metriklerini Inter fontuna yaklaştırır. Font swap sırasındaki metin boyutu değişimi neredeyse sıfıra iner ve CLS etkisi ortadan kalkar. Bu metrik override değerleri, fontun tasarımına göre hesaplanır. @capsizecss/metrics veya fontaine kütüphaneleri bu hesaplamayı otomatik olarak yapar.

Next.js next/font Modülü ile Otomatik Font Optimizasyonu

Next.js'in next/font modülü, font optimizasyonunun tüm adımlarını otomatik olarak gerçekleştirir. Font dosyasını self-host eder, font-display: swap uygular, fallback font metrik override'larını hesaplar ve font dosyasını preload eder:

    
import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin', 'latin-ext'],
  display: 'swap',
  fallback: ['system-ui', 'Arial']
});

export default function RootLayout({ children }) {
  return (
    <html lang="tr" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}
    

Bu yapıda next/font, Inter fontunu Google Fonts'tan indirip projenin statik dosyaları arasına yerleştirir. Üçüncü parti DNS çözümleme, bağlantı kurma ve indirme gecikmeleri ortadan kalkar. Fallback font metrikleri otomatik hesaplanır ve CSS'e enjekte edilir. Bu otomasyon, font optimizasyonunun tüm karmaşıklığını tek bir modül çağrısına indirger.

Variable Font ve font-display: swap Birlikteliği

Variable font, tek bir font dosyasında birden fazla ağırlık, genişlik ve stil barındıran modern font formatıdır. Geleneksel yaklaşımda her ağırlık için ayrı dosya (regular 30 KB + bold 30 KB + italic 30 KB = 90 KB) indirilirken, variable font tüm ağırlıkları tek dosyada (45-60 KB) sunar. Bu konsolidasyon, toplam indirme süresini kısaltır ve font swap sayısını bire indirir.

    
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
}
    

font-weight: 100 900 tanımı, variable fontun desteklediği ağırlık aralığını bildirir. Bu tek @font-face bloğu, 100'den 900'e kadar tüm ağırlıkları kapsar. Ayrı ayrı font dosyaları indirmek yerine tek dosya yüklemek, HTTP istek sayısını azaltır ve swap geçişini tek bir noktaya indirger.

font-display: optional ve swap Arasındaki Stratejik Tercih

optional değeri, tarayıcıya fontun zorunlu olmadığını bildirir. Tarayıcı, fontun cache'te olup olmadığını kontrol eder. Cache'teyse kullanır, değilse arka planda indirmeye başlar ancak mevcut sayfa yüklemesinde uygulamaz. Sonraki sayfa yüklemesinde font cache'ten kullanılır. Bu yaklaşımda font swap hiç gerçekleşmez, dolayısıyla CLS sıfırdır.

optional değerinin dezavantajı, ilk ziyaretçilerin web fontunu hiç göremeyeceğidir. Marka tutarlılığının kritik olduğu sitelerde bu kabul edilemez. Sahadaki gerçek tecrübemiz gösteriyor ki, e-ticaret ve kurumsal sitelerde swap değeri daha uygun düşüyor; çünkü marka fontunun ilk ziyarette bile görünmesi bekleniyor. Blog ve içerik siteleri ise optional değerini tercih edebilir; metin okunabilirliği font seçiminden daha önemlidir ve CLS riski tamamen ortadan kalkar.

Preconnect ile Font CDN Bağlantı Süresinin Kısaltılması

Google Fonts veya Adobe Fonts gibi harici font servislerinden font yükleniyorsa, font dosyasının keşfedilmesinden önce DNS çözümleme, TCP bağlantısı ve TLS handshake tamamlanmalıdır. Bu bağlantı kurma süreci 100-300 ms sürer ve font indirme başlangıcını geciktirir. preconnect bu süreyi önceden tamamlar:

    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    

Google Fonts, CSS dosyasını fonts.googleapis.com'dan, font dosyalarını ise fonts.gstatic.com'dan sunar. Her iki domain'e de preconnect uygulamak, font indirme süresini 100-300 ms kısaltır. Self-hosted fontlarda preconnect gerekmez; çünkü font dosyaları ana domain'den sunulur ve bağlantı zaten mevcuttur. Bu avantaj, self-hosting tercihinin güçlü gerekçelerinden biridir.

Font Subset ve Unicode Range ile Dosya Boyutu Optimizasyonu

Font dosyaları, desteklediği tüm karakter setlerinin glif'lerini içerir. Latin, Kiril, Yunanca, Vietnamca ve diğer dillerin karakterleri tek dosyada paketlendiğinde, dosya boyutu 100-300 KB'a ulaşabilir. Türkçe bir site yalnızca Latin Extended karakter setini kullanır; diğer karakter setleri gereksiz yüktür.

Google Fonts API, subset parametresiyle yalnızca gerekli karakter setini indirir. Self-hosted fontlarda ise glyphhanger veya fonttools araçlarıyla font dosyası subset'lenir:

    
glyphhanger --whitelist="U+0000-00FF,U+0131,U+0152-0153" --subset=inter-regular.woff2
    

Bu komut, yalnızca belirtilen Unicode aralığındaki glif'leri içeren küçültülmüş bir font dosyası üretir. Tam font dosyası 90 KB iken, Latin subset'i 25-30 KB'a düşer. Daha küçük dosya, daha hızlı indirme süresi ve daha kısa FOUT penceresi anlamına gelir.

Font Loading API ile Programatik Kontrol

CSS font-display özelliğinin ötesinde, JavaScript Font Loading API font yükleme sürecini programatik olarak kontrol etmeye olanak tanır. Bu API, fontun yüklenme durumunu izlemeyi, yükleme tamamlandığında DOM class'ı eklemeyi ve font yükleme hatasını yönetmeyi sağlar:

    
document.fonts.load('1em Inter').then(() => {
  document.documentElement.classList.add('fonts-loaded');
});
    

    
body {
  font-family: Arial, sans-serif;
}

.fonts-loaded body {
  font-family: 'Inter', Arial, sans-serif;
}
    

Bu yaklaşımda sayfa önce Arial ile render edilir. Font yüklendiğinde fonts-loaded class'ı eklenir ve CSS specificity ile web fontu devreye girer. Bu yöntem, font-display: swap'a kıyasla daha granüler kontrol sunar ancak JavaScript bağımlılığı getirir. SSR mimarilerinde JavaScript'in hydration'dan sonra çalışması nedeniyle bu yaklaşım, font-display: swap'ın yerini almaz, tamamlayıcısı olarak kullanılır.

Performans İzleme ve Font Yükleme Metriklerinin Takibi

Font yükleme süresini izlemek, optimizasyonların etkisini ölçmenin ön koşuludur. PerformanceObserver API ile font kaynaklarının indirme süreleri gerçek zamanlı olarak takip edilebilir:

    
new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.name.includes('.woff2') || entry.name.includes('.woff')) {
      console.log(`Font: ${entry.name}`);
      console.log(`İndirme: ${Math.round(entry.duration)}ms`);
      console.log(`Boyut: ${entry.transferSize} bytes`);
    }
  }
}).observe({ type: 'resource', buffered: true });
    

Bu veriyi analytics platformuna göndererek, farklı ağ koşullarındaki font indirme sürelerini istatistiksel olarak analiz edebilirsiniz. LinkedIn üzerindeki web performans topluluklarında paylaşılan veri analizleri gösteriyor ki, font preload + swap + subset kombinasyonunu uygulayan siteler, ham font yüklemesine kıyasla font kaynaklı LCP gecikmesini ortalama %75 azaltıyor.

Google Fonts Proxy ve Gizlilik Odaklı Self-Hosting

Google Fonts API kullanıldığında, kullanıcı IP adresi Google sunucularına iletilir. GDPR ve KVKK gibi veri koruma düzenlemeleri kapsamında, bazı hukuki değerlendirmeler bu veri transferini sorunlu bulabilir. Almanya'da verilen mahkeme kararları, Google Fonts'un harici yüklenmesinin veri koruma ihlali oluşturabileceğine hükmetmiştir.

Self-hosting bu sorunu kökten çözer. google-webfonts-helper veya fontsource araçları, Google Fonts fontlarını otomatik olarak indirir ve projeye dahil eder:

    
npm install @fontsource/inter
import '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';
    

Bu yaklaşımda font dosyaları projenin kendi sunucusundan sunulur, üçüncü parti veri transferi gerçekleşmez ve GDPR uyumluluğu sağlanır. Ek olarak, harici DNS çözümleme ve bağlantı kurma gecikmesi ortadan kalkar.

WordPress'te font-display: swap Uygulaması

WordPress temalarında font yükleme, functions.php dosyasında wp_enqueue_style ile veya doğrudan tema CSS dosyasında @font-face kuralıyla yapılır. Google Fonts kullanılıyorsa, enqueue edilen URL'ye display=swap parametresinin eklendiğini doğrulamak gerekir.

Tema CSS'inde tanımlı @font-face kurallarına font-display: swap eklenmemişse, tema dosyasını düzenleyerek veya child theme oluşturarak bu kuralı ekleyebilirsiniz. WP Rocket ve Perfmatters gibi performans eklentileri, font-display: swap'ı otomatik olarak tüm @font-face kurallarına enjekte eder. Bu eklentiler, tema koduna dokunmadan swap uygulamasını sağlayan en düşük sürtünmeli çözümdür.

Font Yükleme Stratejisinin Core Web Vitals Bütünsel Etkisi

Font yükleme stratejisi, Core Web Vitals'ın üç metriğini farklı biçimlerde etkiler. LCP açısından, swap metnin anında görünmesini sağlayarak LCP'yi font indirme süresinden bağımsız kılar. CLS açısından, fallback font metrik override'ları swap geçişindeki layout shift'i minimize eder. INP açısından ise font dosyasının küçük tutulması (subset, WOFF2, variable font) parse süresini kısaltır ve ana thread'in daha erken serbest kalmasını sağlar.

Bu üç metriğin birlikte optimize edilmesi, font stratejisinin bütünsel tasarlanmasını gerektirir. Yalnızca swap eklemek LCP'yi iyileştirir ancak CLS riski oluşturur. Swap + metrik override CLS'i çözer ancak font dosyası büyükse indirme süresi uzar. Swap + metrik override + preload + subset + WOFF2 formatı, üç metriğin birden optimal olmasını sağlayan tam stratejidir.

Font Optimizasyonu Kontrol Listesi ve Periyodik Denetim

Çoğu uzman aksini iddia etse de, font optimizasyonu tek seferlik bir yapılandırma değil, tema güncellemeleri, font değişiklikleri ve yeni sayfa tipleri eklendikçe revize edilmesi gereken bir süreçtir. Aşağıdaki kontrol noktaları, her teknik denetimde uygulanmalıdır:

• Tüm @font-face bloklarında font-display: swap bulunduğunu doğrulayın: Tek bir eksik blok, o font ağırlığında FOIT davranışına neden olur ve LCP'yi uzatır.
• Google Fonts URL'lerinde display=swap parametresini kontrol edin: Parametresiz URL'ler varsayılan FOIT davranışını uygular.
• LCP elemanında kullanılan font dosyasının preload edildiğini doğrulayın: Preload olmadan font keşfi CSS parse'ına bağlı kalır ve indirme gecikir.
• Fallback font metrik override'larının tanımlı olduğunu kontrol edin: Override olmadan swap geçişi CLS üretir.
• Font dosyalarının WOFF2 formatında sunulduğunu doğrulayın: WOFF2, WOFF'a göre %30 daha küçük dosya boyutu sunar.
• Yalnızca gerekli karakter setinin yüklendiğini kontrol edin: Unicode-range veya subset ile gereksiz glif'lerin indirilmesini engelleyin.

Teoride doğru görünen ama pratikte patlayan nokta şudur: font-display: swap eklemek basit bir CSS kuralıdır, ancak swap'ın tetiklediği CLS sorununu çözmek için fallback metrik override'ları hesaplamak, her font ailesi için ayrı ayrı test etmek ve preload stratejisiyle entegre etmek gerekir. Swap tek başına bir çözüm değil, kapsamlı font optimizasyon stratejisinin giriş adımıdır.