Fontları Yanlış Yüklüyorsunuz (ve Bu Performansa Zarar Veriyor)

• Web fontları, bir web sitesinin görsel öğesi olarak markayı ve kullanıcı deneyimini şekillendirir; ayrıca performans ve erişilebilirlik üzerinde doğrudan etkilidir
• Hatalı font yükleme yöntemleri FOUT (stilsiz metin yanıp sönmesi) veya FOIT (görünmez metin yanıp sönmesi) sorunlarına yol açar; bu da Core Web Vitals üzerinde olumsuz etki yaratır
• WOFF2 biçimi modern ve verimli bir font formatıdır, çoğu güncel tarayıcı tarafından desteklenir ve gereksiz eski formatları kaldırarak performansı iyileştirir
• Font alt kümelemesi ve preload stratejileri, gereksiz veri aktarımını azaltmak ve sayfa yükleme hızını artırmak için kritik önemdedir
• Sistem font yığını ve CSS tanımlayıcıları kullanılarak font yükleme sırasında düzen kayması (CLS) en aza indirilebilir ve daha istikrarlı bir kullanıcı deneyimi sağlanabilir

---

Web fontlarının kısa tarihi

Web fontları, önemine rağmen hâlâ birçok kişinin yanlış kullandığı, web tasarımı ve kullanıcı deneyiminin temel unsurlarından biridir. Aşağıda web fontlarının gelişim süreci özetlenmiştir.

• "Web safe" dönemi

  • Web'in ilk dönemlerinde yalnızca Arial, Times New Roman gibi web safe fontlar kullanılabiliyor, özel fontlar ise görsellerle ikame ediliyordu
  • Tarayıcılar arasında font render etme farkları olduğu için tutarlı tasarım elde etmek zordu

• @font-face öncesi hileler: sIFR ve Cufón

  • sIFR: Metni Flash ile dinamik olarak render ediyordu, ancak ağırdı ve erişilebilirlik açısından zayıftı
  • Cufón: Fontları JavaScript ile vektör grafiklere dönüştürüp ekliyordu, fakat yavaştı ve erişilebilirlik sorunları sürüyordu

• @font-face'in gelişi

  • @font-face, CSS ile özel font eklemeyi mümkün kıldı; ancak her tarayıcının farklı formatlar (EOT, SVG fontları, TTF/OTF) istemesi süreci karmaşıklaştırdı
  • Font lisanslama sorunları ve yasa dışı kopyalama yaygındı

• Ticari hizmetler: Typekit ve benzerleri

  • Typekit (bugünkü Adobe Fonts), lisans ve uyumluluk sorunlarını çözen abonelik tabanlı bir hizmet olarak JavaScript snippet'i aracılığıyla font sağladı
  • Üçüncü taraf script'lere bağımlı bu yaklaşım bugün de sürüyor

• Uyumluluk hileleri ve geçici çözümler

  • Birden fazla format barındırmak ya da FOUT ve FOIT sorunlarını çözmek için JavaScript düzeltmeleri gerekebiliyordu
  • Eksik glif sorunlarını çözmek için ikon fontları kullanma denemeleri de yapıldı

• Google Fonts ve "ücretsiz font" patlaması

  • Google Fonts, açık lisanslı ücretsiz fontlarla font yüklemeyi kolaylaştırdı; ancak GDPR ihlali sorunları ve yavaş yükleme hızları yeni problemler doğurdu
  • Optimizasyonu lisans kısıtları nedeniyle zor olan ticari fontların aksine, Google Fonts daha serbest kullanılabiliyordu

Fontlar nasıl çalışır (temel)

Fontlar yalnızca basit bir CSS ayarı değildir; tarayıcının rendering pipeline sürecine derinlemesine dahil olan karmaşık bileşenlerdir.

• Formatlar: TTF'den WOFF2'ye

  • TTF/OTF: Masaüstü odaklı, daha ağır formatlar
  • WOFF2: Brotli sıkıştırma kullanan modern ve verimli bir web fontu formatı; çoğu proje için uygundur

• Rendering pipeline

  • Font yükleme; kayıt, stil çözümleme, font eşleştirme, glif kapsamı, istek, görüntüleme aşaması, decode ve shaping adımlarından geçer
  • font-display ayarı (swap, block, fallback, optional) metnin nasıl gösterileceğini belirler

• Metrikler

  • Ascent, descent, line gap gibi metrikler fontun yüksekliğini ve boşluklarını tanımlar
  • Font değişimi sırasında metrik uyumsuzluğu düzen kaymasına (CLS) neden olabilir

• Sentetik stiller

  • Tarayıcı istenen font weight veya style değerini bulamazsa sahte kalınlık ya da italik üretir, bu da kaliteyi düşürür
  • font-synthesis: none; ile sahte stil üretimi engellenebilir

• Glif kapsamı

  • Fontlar tüm karakterleri içermez; eksik glifler yedek font ile render edilir ve bu da tutarlılık sorunları yaratır
  • Yalnızca gerekli glifleri yüklemek için unicode-range kullanılabilir

Performans ve strateji temelleri

Fontlar kritik render yolunu etkiler ve kötü yönetildiklerinde performansı düşürebilir.

• Dosya boyutu

  • Tek bir font ailesi 800KB'a kadar çıkabilir; gereksiz gliflerin dahil edilmesi veri israfına yol açar
  • Font alt kümelemesi ile yalnızca gerekli glifler gönderilerek boyut optimize edilir

• Düzen kayması

  • Yedek font ile özel font arasındaki metrik farkı CLS'ye neden olur
  • size-adjust, ascent-override gibi CSS tanımlayıcılarıyla düzen daha kararlı hâle getirilebilir

• Modern CSS tanımlayıcıları

  • font-display: swap; yedek fontu hemen göstererek daha istikrarlı bir render sağlar
  • unicode-range ile yalnızca belirli script'ler için gereken glifler yüklenebilir

Değişken fontlar: vaat ve gerçeklik

Değişken fontlar, tek bir dosyada farklı stilleri ve weight'leri destekleyerek verimlilik sağlayabilir.

• Vaat

  • Birden çok statik dosyayı tek bir dosyada birleştirme
  • Viewport boyutuna göre dinamik olarak ayarlanabilen responsive typography

• Gerçeklik

  • Gerekli weight sayısı azsa değişken font daha ağır olabilir
  • Tarayıcı desteği bazı eksenlerde sınırlıdır ve lisans sorunları yaşanabilir

• Performans stratejisi

  • Yalnızca gerekli eksenleri seçin ve script bazlı alt kümeleme ile dosya boyutunu optimize edin
  • Statik fontlarla karşılaştırıp gerçekten avantaj sağlayıp sağlamadığını doğrulayın

• CSS'te değişken font ekseni kullanım örneği

  @font-face {  
    font-family: "Acme Variable";  
    src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
    font-weight: 100 900;  
    font-display: swap;  
  }  
  h1 {  
    font-family: "Acme Variable", system-ui, sans-serif;  
    font-weight: 700;  
  }  
  

Sistem yığınları ve CDN

Özel font kullanmadan sistem font yığını tercih etmek, anında yükleme ve daha tanıdık bir deneyim sunar.

• Sistem font yığını

  • -apple-system, Segoe UI gibi fontlardan oluşan yığınlar tüm platformlarda tutarlılık sağlar
  • Emoji render etmede sistem fontları daha iyi performans sunar

• CDN ve üçüncü taraf barındırma

  • Google Fonts, veri sızıntısı nedeniyle GDPR ihlaline yol açabilir
  • Self-hosting, DNS arama gecikmesini azaltır ve önbellek kontrolü sağlar

Yedek fontlar ve eşleştirme

Yedek fontlar, özel font yüklenmeden önce kullanıcı deneyimini belirler; bu nedenle dikkatli tasarlanmalıdır.

• Yedek font tasarımı

  • x-height ve karakter genişliği, özel fonta benzer ayarlanarak CLS en aza indirilebilir
  • font-size-adjust ile yedek font boyutu ayarlanabilir

• Özel ve yedek font eşleştirme

  • Benzer oranlara sahip fontlar seçin ve metrik ayarlaması ile düzen kararlılığını koruyun
  • Platformlar arası render farklarını hesaba katıp kararlılık ve okunabilirlik önceliklendirilmelidir

Preload ve yükleme stratejileri

Font sunum stratejisi kullanıcı deneyimini ciddi biçimde etkiler.

• Yükleme sonuçları

  • FOIT, yavaş ağlarda metnin görünmemesi sorununa yol açar
  • font-display: swap; güvenli varsayılan olarak yedek fontu hemen gösterir

• Preload

  • Font yüklemeyi hemen başlatmak için <link rel="preload" as="font"> kullanın
  • CORS başlıkları ve doğru URL eşleşmesi zorunludur

• Early Hints (HTTP 103)

  • Sunucu, HTML yanıtından önce fontların alınmasını işaret ederek yükleme süresini kısaltabilir
  • Bant genişliği israfını önlemek için yalnızca kritik fontlar ipucu olarak verilmelidir

• Font Loading API

  • Font Loading API, dinamik sitelerde font yüklemeyi ayrıntılı biçimde kontrol etmeyi sağlar

Dosya formatları: WOFF2, WOFF, TTF ve eski sistem yükü

WOFF2, modern web için en verimli formattır; çoğu durumda tek başına yeterlidir.

• Gereksiz formatları kaldırmak için yalnızca WOFF2 kullanın
• base64 gömme önbelleği bozduğu için kaçınılmalıdır

İkon fontları: Font Awesome ve büyük hata

İkon fontları, erişilebilirlik ve performans sorunları nedeniyle modern web için uygun değildir.

• SVG ikonları anlamsal olarak daha doğru, daha esnek ve CSS ile stillendirilebilir
• Mevcut ikon fontları kullanılıyorsa alt kümeleme yapılmalı ve SVG'ye geçiş planı hazırlanmalıdır

Latin ötesi: Latin dışı script'ler, RTL diller, emoji

Latin dışı script'ler ve RTL diller, karmaşık shaping ve metrikler gerektirir.

• Alt kümeleme sırasında script'e özgü özellikler dikkate alınarak render hataları önlenmelidir
• Emoji için sistem fontları kullanmak tutarlılığı ve performansı iyileştirir

Web fontlarının geleceği: gelişen standartlar ve modern riskler

Yeni CSS özellikleri, değişken fontlar ve renkli fontlar, web tipografisini ileri taşıyor.

• Font Loading API ve Early Hints, SPA'lerde yaşanan gecikme sorunlarını azaltır
• Fontlara bir altyapı bileşeni gibi yaklaşılmalı; performans ve erişilebilirlik önceliklendirilmelidir

Araçlar ve denetim

Font performansı DevTools, Lighthouse, Glyphhanger gibi araçlarla ölçülebilir.

• Font alt kümeleme araçlarıyla gereksiz glifleri kaldırın
• Font Style Matcher ile yedek font metriklerini ayarlayın

Fontları doğru ele almak için manifesto

Fontlar basit bir süsleme değil, kullanıcı deneyimi ve performans açısından temel bir unsurdur.

• Önce sistem: Sağlam bir sistem font yığınıyla başlayın
• Akıllı alt kümeleme: Yalnızca gerekli glifleri gönderin
• Yalnızca WOFF2: Eski formatları kaldırın
• Küresel script'lere saygı: Farklı dilleri ve emoji'yi destekleyin
• Test şart: Farklı ağlarda ve cihazlarda test edin

Fontları hem içerik hem de marka unsuru olarak ele alın; performans ve erişilebilirlik için sıkı bir yönetim uygulayın

[nemorize]

Cufón adını gerçekten uzun zamandır duymamıştım haha