Web fontları hâlâ çoğu sitede en kolay performans kazanımı

Sürekli karşımıza çıkan kalıp

Bugün rastgele on canlı web sitesini denetlerseniz, çoğunda kabaca aynı font durumuyla karşılaşırsınız:

• Ana sayfada altı ila on font dosyası yüklenir
• Hepsi WOFF2'dir (iyi) ama hiçbir font-display stratejisi yoktur (kötü)
• Sayfanın hiçbir yerinde kullanılmayan birkaç ağırlık ve stil vardır
• Tüm yığın, beraberinde getirdiği tüm DNS, TLS ve gizlilik maliyetiyle birlikte üçüncü taraf bir alan adından (genellikle Google Fonts) sunulur
• unicode-range alt kümelemesi yoktur; bu yüzden sayfa İngilizce olsa bile her ziyaretçi Kiril ve Yunan gliflerini indirir

Bu yalnızca küçük sitelere özgü bir sorun değil. İyi finanse edilmiş pek çok pazarlama sayfası hâlâ ilk paragraf görüntülenebilir olmadan önce 600 KB font yüklüyor. Bu kalıbı fark etmeye başladığınızda artık görmezden gelemezsiniz.

Çözüm egzotik değil. Yıllardır tarayıcılarda bulunan, iyi anlaşılmış birkaç teknikten ibaret.

Altı statik font yerine tek bir variable font kullanın

Inter Regular, Inter Medium, Inter SemiBold, Inter Bold ve bunların italiklerini yüklüyorsanız, ihtiyacınız olandan yaklaşık altı kat fazla bayt indiriyorsunuz demektir. Tek bir Inter variable font, tüm ağırlık eksenini (bazı derlemelerde eğimi de) iki statik ağırlıktan ancak biraz daha büyük tek bir dosyada kapsar.

Tarayıcı desteği konusu yıllar önce netleşti — variable fontlar önemli olan her yerde çalışıyor. Kalan tereddüt çoğunlukla statik font döneminden kalma alışkanlıktan ibaret.

Pratik bir kural: aile başına, yazı sistemi başına bir variable font dosyası. Latin bir dosyada, Kiril başka bir dosyada, Yunan üçüncü bir dosyada; unicode-range ile koşullu olarak yüklenir. Hepsi bu.

Mantıklı bir font-display belirleyin

Özel bir font hâlâ yüklenirken varsayılan davranış, üç saniyeye kadar hiçbir şey göstermemektir — görünmez metin. Bu, olabilecek en kötü varsayılandır. Kullanıcılar boş bir sayfa görür ve bir şeyin bozuk olduğunu düşünür.

Bunu her @font-face kuralına ekleyin:

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

swap, fallback fontu hemen gösterir ve özel font yüklendiğinde onunla değiştirir. Kullanıcı sayfayı sıfırıncı milisaniyeden itibaren okuyabilir. Bedeli, değişim gerçekleştiğinde kısa bir düzen kaymasıdır; bunu da bir sonraki teknikle azaltırsınız.

Fallback metriklerinizi eşleştirin

Stilsiz metin parlaması yalnızca fallback ile özel fontun metrikleri çok farklı olduğunda rahatsız edici gelir. Modern CSS bunu size-adjust, ascent-override ve benzerleriyle çözer:

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

Fallback metrikleri ayarlandığında değişim neredeyse fark edilmez — özel font gelmeden önce ve geldikten sonra kelimeler aynı yatay alanı kaplar.

Google'ın --allow-fallback-font-metrics çalışması artık temel tarayıcı desteği kapsamında ve doğru sayıları sizin için saniyeler içinde hesaplayan bir araç hattı (fontaine kütüphanesi ve benzerleri) var.

Kendi sunucunuzdan barındırın

Google Fonts kullanışlı, ücretsiz ve iki gerçek maliyet getiriyor:

1. İkinci bir TLS el sıkışması. HTTP/3 ve bağlantı birleştirme olsa bile, fazladan bir origin nadiren bedavadır.
2. Gizlilik ve uyumluluk sorusu. Birkaç Avrupa mahkemesi, Google Fonts'u fonts.gstatic.com üzerinden yüklemenin kişisel verilerin (IP adresinin) üçüncü tarafa aktarılması anlamına geldiğine hükmetti. Kendi sunucunuzdan barındırmak bu soruyu tamamen ortadan kaldırır.

İndirip barındırma hattı şudur:

1. WOFF2 dosyasını alın (varsa variable derleme)
2. Kitlenizin gerçekten kullandığı yazı sistemlerine göre alt kümeye ayırın
3. Sitenizin geri kalanıyla aynı origin üzerinden, uzun bir Cache-Control: max-age=31536000, immutable ile sunun
4. En kritik ağırlığı preload edin: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Tüm süreç bu. Mevcut bir site için bir öğleden sonra sürer ve neredeyse hiç geri dönmezsiniz.

Özel fontları tamamen ne zaman atlamalı

Bunu açıkça söylemeye değer: Her sitenin özel bir fonta ihtiyacı yoktur. Sistem font yığını artık her işletim sisteminde gerçekten güzel:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Ağırlık doğru, metrikler doğru, render cihaz için ayarlanmış ve ağ üzerinden taşınan bayt maliyeti tam olarak sıfır. Bir araç sitesi, dahili uygulama, içeriği önceleyen bir portföy ya da yavaş ağlardaki kullanıcılara yönelik herhangi bir şey için doğru cevap sistem yığınıdır.

<!-- tool-cta:start -->

💡 Bunu deneyin: TTF veya OTF dosyalarınızı Webfont Generator kullanarak kullanıma hazır CSS ile modern WOFF2’ye dönüştürün; bu, yazının önerdiği format değişikliğidir.

<!-- tool-cta:end -->

Dürüst özet

Tipik küçük bir site için, dört adım tüm web fontu performansı hikâyesini kapsar:

1. Yazı sistemi ve aile başına tek bir variable font
2. Eşleştirilmiş fallback metrikleriyle font-display: swap
3. Uzun cache başlıkları ve kritik ağırlık için preload ile kendi sunucunuzdan barındırma
4. Ya da fontları tamamen atlayıp sistem yığınını kullanma

Bunu bir kez yaptığınızda ana sayfadan birkaç yüz kilobayt geri kazanır, algılanan performansta birkaç yüz milisaniye kazanır ve bu arada üçüncü taraf bağımlılığını kaldırırsınız. Çok az değişiklik daha iyi bir emek-getiri oranına sahiptir.