Web Font Optimizasyonu: WOFF2, Subsetting ve Hız

Hızlı Özet (TL;DR)

Kurumsal kimliği yansıtan özel yazı tipleri (Typography), modern arayüz tasarımının ve marka algısının vazgeçilmez bir parçasıdır; ancak kontrolsüz ve optimize edilmemiş font kullanımı, sayfa açılış hızını (Core Web Vitals) kilitleyen en büyük gizli darboğazlardan biridir. Google Fonts veya üçüncü taraf CDN sunucularından çalışma zamanında (runtime) yüklenen fontlar; ek DNS sorguları, TCP el sıkışmaları ve TLS bağlantı gecikmeleri yaratır. Ayrıca kırpılmamış tam set bir yazı tipi dosyası Kiril, Yunanca ve binlerce özel sembol karakterini de içerdiği için 300–500 KB boyuta ulaşabilir. Yerel (Self-Hosted) WOFF2 barındırma, Türkçe alt kümeleme (Subsetting), font-display: swap ve metrik uyumlu yedek font (Fallback Font Metrics) mühendisliği ile font yükleme gecikmesi sıfıra indirilir.

1. Web Fontlarının Core Web Vitals (LCP ve CLS) Üzerindeki Etkisi

Bir kullanıcı kurumsal web sitenize tıkladığında, tarayıcı HTML belgesini indirir ve DOM ağacını oluşturmaya başlar. Ancak CSS dosyasında tanımlı özel bir yazı tipi (@font-face) henüz ağ üzerinden indirilmemişse, tarayıcı metinleri ekrana nasıl çizeceğine dair kritik bir ikilemle karşılaşır:

1. FOIT (Flash of Invisible Text - Görünmez Metin Parlaması): Tarayıcı özel font dosyası inene kadar (3 saniyeye varan süre boyunca) başlıklardaki ve paragraflardaki tüm yazıları gizler. Ziyaretçi özellikle mobil 4G bağlantılarda bomboş bir ekranla karşılaşır. Bu durum LCP (Largest Contentful Paint) metriğini doğrudan kırmızıya düşürür ve hemen çıkma oranını artırır.
2. FOUT (Flash of Unstyled Text - Stilsiz Metin Parlaması) ve Kayma: Tarayıcı önce işletim sisteminin varsayılan fontunu (Arial, Roboto veya Segoe UI) gösterir; özel font indiğinde ise metni yeni fontla değiştirir. Eğer sistem fontu ile özel fontun harf genişlikleri ve satır yükseklikleri birbirinden farklıysa, font değiştiği anda tüm sayfa düzeni aşağı/yukarı zıplar ve CLS (Cumulative Layout Shift) cezasına yol açar.

Bu iki performans sorununu aynı anda ortadan kaldırmak, Özel Yazılım Geliştirme ve ön yüz (Frontend) mimarisinde uçtan uca bir font optimizasyon stratejisi gerektirir.

2. Font Formatları ve Sıkıştırma Verimliliği Kıyaslaması

Geçmişte tarayıcı uyumluluğu sağlamak adına EOT, TTF, SVG ve WOFF gibi çoklu formatlar aynı anda tanımlanırdı. Günümüzde tüm modern masaüstü ve mobil tarayıcılar, Google tarafından geliştirilen ve Brotli sıkıştırma algoritmasını kullanan WOFF2 (Web Open Font Format 2.0) standardını desteklemektedir.

Format	Sıkıştırma Teknolojisi	Dosya Boyutu (Ortalama)	Tarayıcı Desteği	Kurumsal Mimari Önerisi
TTF / OTF	Ham, sıkıştırmasız vektör	150 KB – 350 KB	%100 (Masaüstü odaklı)	Web’de kesinlikle kullanılmamalı; bant genişliği israfıdır
WOFF (v1)	Gzip (DEFLATE) tabanlı sıkıştırma	80 KB – 150 KB	%99+	Yalnızca çok eski kurumsal cihaz desteği şartsa yedek olarak
WOFF2	Brotli algoritmasıyla özel glif sıkıştırma	18 KB – 42 KB	%98+	Kurumsal web ve SEO için tek altın standart
Variable WOFF2	Tüm ağırlıkları tek dosyada birleştiren WOFF2	35 KB – 65 KB	%97+	3 ve üzeri font ağırlığı kullanılan siteler için en verimli seçim

3. Font Subsetting (Alt Kümeleme) ile Boyutu %80 Küçültme

Ticari veya açık kaynaklı bir font ailesinde (örneğin Inter, Plus Jakarta Sans veya Outfit) genellikle 2.000 ila 3.500 adet glif (karakter ve sembol) bulunur. Bunların içinde Vietnamca aksanlar, Kiril alfabesi, Yunanca matematiksel semboller ve kullanılmayan yüzlerce ligatür yer alır.

Kurumsal bir web sitesinde yalnızca İngilizce (Basic Latin) ve Türkçe (Latin Extended-A) karakterler kullanılıyorsa, kullanılmayan tüm glifler derleme aşamasında pyftsubset (fonttools) veya glyphhanger araçlarıyla dosyadan temizlenmelidir:

• Standart (Kırpılmamış) TTF Font: 2.800 glif = 210 KB
• Standart WOFF2 Dönüşümü: 2.800 glif = 78 KB
• Subsetting Sonrası WOFF2 (Latin + Türkçe Karakterler): 285 glif = 19 KB

Görüldüğü üzere doğru bir alt kümeleme işlemi, yazı tipinin görsel kalitesinden veya Türkçe karakter (ğ, ü, ş, ı, ö, ç, İ, Ğ, Ü, Ş, Ö, Ç) desteğinden hiçbir ödün vermeden dosya boyutunu %80’in üzerinde küçültmektedir.

Değişken Fontlar (Variable Fonts) ne Zaman Tercih Edilmeli?

Eğer tasarım sisteminizde Regular (400), Medium (500), SemiBold (600) ve Bold (700) olmak üzere 4 farklı font ağırlığı kullanılıyorsa, 4 ayrı statik WOFF2 dosyası indirmek toplamda 4 ayrı HTTP isteği ve ~85 KB yük oluşturur. Bunun yerine tek bir Variable Font (Değişken Font) dosyası kullanıldığında, font-weight: 400 700 aralığındaki tüm kalınlıklar tek bir 38 KB’lık dosya içinden matematiksel interpolasyonla üretilir.

4. Google Fonts CDN Yerine Neden Yerel Barındırma (Self-Hosting)?

Birçok geliştirici kolaylık olması açısından HTML koduna doğrudan <link href="https://fonts.googleapis.com/..."> satırını ekler. Oysa 2020 sonrası tarayıcılarda devreye alınan HTTP Önbellek Bölümleme (Cache Partitioning) güvenlik standardı nedeniyle, bir kullanıcının başka bir sitede indirdiği Google Font dosyası sizin sitenizde tekrar kullanılamaz; her site için sıfırdan indirilir.

Üstelik Google Fonts CDN kullanmanın üç ciddi dezavantajı vardır:

1. Çift Sunucu Bağlantı Maliyeti: Tarayıcı önce CSS dosyasını çekmek için fonts.googleapis.com adresine, ardından gerçek font dosyasını indirmek için fonts.gstatic.com adresine ayrı ayrı DNS, TCP ve TLS bağlantısı kurar.
2. HTTP/2 ve HTTP/3 Çoklama Kaybı: Kendi sunucunuzdan (Self-Hosted) sunulan fontlar, sitenizin ana HTML ve CSS dosyalarıyla aynı TCP bağlantısı (Connection Coalescing) üzerinden hiç beklemeden paralel akar.
3. KVKK ve GDPR Gizlilik Riski: Ziyaretçinin tarayıcısı Google sunucularına bağlandığında kullanıcının IP adresi doğrudan yurt dışındaki üçüncü taraf sunuculara iletilmiş olur. Avrupa’daki birçok mahkeme kararı ve KVKK ve 5651 Yasal Loglama denetim ilkeleri açısından fontların kendi sunucunuzda (/public/fonts/) barındırılması hem hukuki hem de teknik olarak en güvenli yoldur.

5. Modern CSS @font-face, font-display ve Metrik Eşleştirme Kurgusu

Kullanıcının font yüklenene kadar boş beyaz bir ekranla karşılaşmasını (FOIT) ve font yüklendikten sonra sayfanın kaymasını (CLS) önlemek için modern CSS mimarisinde @font-face kuralı, boyut ayarlayıcı (size-adjust, ascent-override) yedek font tanımlarıyla birlikte yazılır:

/* 1. Özel Fontun Yerel WOFF2 Olarak Tanımlanması */
@font-face {
  font-family: 'KurumsalFont';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap; /* Font inene kadar metrik eşleşmeli sistem fontu görünür */
  src: url('/fonts/kurumsal-font-tr-subset.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0130-0131, U+0152-0153, U+011E-011F, U+015E-015F, U+2000-206F;
}

/* 2. CLS (Düzen Kayması) Sıfırlayan Yedek Sistem Fontu Kalibrasyonu */
@font-face {
  font-family: 'KurumsalFont-Fallback';
  src: local('Segoe UI'), local('Roboto'), local('Arial');
  size-adjust: 104.5%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

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

Bu mühendislik tekniğinde size-adjust ve ascent-override parametreleri, işletim sistemindeki yerleşik Segoe UI veya Arial fontunun kapladığı piksel alanını milimetrik olarak özel fontunuzla eşitler. Böylece WOFF2 dosyası 100 milisaniye sonra devreye girdiğinde satır kayması (CLS) 0.000 olarak gerçekleşir.

6. Kritik Fontları Preload ile Önden Yükleme ve Önbellekleme

Tarayıcı normal şartlarda bir font dosyasını indirmeye ancak HTML’i okuyup, CSS dosyasını indirip, DOM üzerinde o fontu kullanan bir metin düğümü gördüğünde başlar. Bu gecikmeli keşif sürecini (Late Discovery) kırmak için, sayfanın ilk ekranında (Above the fold) yer alan ana başlık ve gövde fontunu HTML <head> alanında rel="preload" ile tarayıcıya önceden bildiririz:

<link
  rel="preload"
  href="/fonts/kurumsal-font-tr-subset.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

Preload Kullanırken Dikkat Edilmesi Gereken 3 Kural

1. crossorigin Özniteliği Zorunludur: Font dosyası kendi alan adınızda barındırılsa bile, W3C Font Fetching spesifikasyonu gereği crossorigin parametresi yazılmazsa tarayıcı fontu iki kez indirir (biri preload için anonim olmayan modda, diğeri CSS için anonim modda).
2. En Fazla 1 veya 2 Dosya Preload Edilmelidir: Sitedeki 6 farklı font dosyasının tamamına preload vermek, kritik CSS ve Hero görselinin bant genişliğini çalarak LCP süresini tam tersine yavaşlatır. Yalnızca ilk ekranda görünen ana WOFF2 dosyası önden yüklenmelidir.
3. Immutable Cache-Control Başlığı: Font dosyaları nadiren değiştiği için web sunucusunda (Nginx / Cloudflare) /fonts/*.woff2 yolu için Cache-Control: public, max-age=31536000, immutable yanıt başlığı tanımlanmalıdır. Böylece ikinci kez gelen ziyaretçi font için sunucuya tek bir byte bile istek atmaz.

Tipografisi kurumsal kimliğinizi yansıtan, Google PageSpeed testlerinden 100/100 performansla geçen ve açılışı ışık hızında olan web siteleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızdan uzman desteği alın.

Sıkça Sorulan Sorular

font-display: swap ile font-display: optional arasındaki fark nedir, hangisi seçilmelidir?

font-display: swap kullanıldığında tarayıcı metni anında yedek sistem fontuyla ekrana basar ve özel WOFF2 fontu indirilir indirilmez (ister 50 ms ister 2 saniye sonra olsun) yazı tipini özel fontla değiştirir; kurumsal marka kimliğinin her koşulda görünmesi istenen sitelerde size-adjust ile birlikte swap en ideal tercihtir. font-display: optional ise fonta yalnızca ~100 ms süre tanır; eğer font bu sürede inmezse o sayfa görüntülemesinde özel fonttan tamamen vazgeçer ve sonraki sayfa geçişleri için önbelleğe alır.

İkon fontları (FontAwesome vb.) sayfa hızını nasıl etkiler, ne kullanılmalıdır?

Binlerce ikonu tek bir 150 KB’lık font dosyasında barındıran geleneksel ikon fontları (FontAwesome, Material Icons font paketleri), sitede sadece 10 adet ikon kullanılsa bile tüm dosyanın indirilmesini zorunlu kılar ve erişilebilirlik (ekran okuyucu) sorunları yaratır. Modern web mimarisinde ikon fontları tamamen terk edilmeli; bunun yerine yalnızca kullanılan ikonların yer aldığı Satır İçi SVG (Inline SVG) veya SVG Sprite tekniği kullanılmalıdır.

Türkçe karakterlerin sonradan kalınlaşması veya farklı fontta görünmesi (Ransom Note Effect) neden olur?

Bu sorun, seçilen font ailesinin latin alt kümesinin yüklenip latin-ext (Türkçe ğ, ş, ı, İ karakterlerini içeren genişletilmiş küme) alt kümesinin unutulmasından veya kullanılan yabancı fontun Türkçe glifleri hiç barındırmamasından kaynaklanır. Tarayıcı fontun içinde ş harfini bulamadığında yalnızca o harfi Arial ile çizer. Çözüm olarak font seçimi yapılırken mutlaka Türkçe glif desteği doğrulanmalı ve subsetting işleminde U+011E-011F, U+0130-0131, U+015E-015F Unicode aralıkları pakete dahil edilmelidir.