Bir yazı tipini seçmek ve sayfaya doğru yüklemek

Yazı tipi bir tasarım kararı olarak veriliyor: şu aile, şu ağırlıklar, şu boyutlar. Kararın ikinci yarısı ise hiç konuşulmuyor. O aile tarayıcıya nasıl ulaşacak, dosya inene kadar ekranda ne görünecek, ve metin yerine oturduğunda satırlar kayacak mı? Bunlar tasarımın değil yüklemenin soruları, ve cevapları ziyaretçinin gördüğü ilk saniyeyi belirliyor.

Kaç kesim gerçekten gerekiyor

Bir ailenin sekiz ağırlığı olması sekizini kullanman gerektiği anlamına gelmiyor. Çoğu site üç kesimle çalışıyor: gövde için normal, vurgu için kalın, başlıklar için yarı kalın.

Her ek kesim ayrı bir dosya demek. Latin karakter kümesi için alt küme çıkarılmış modern bir kesim yirmi ile kırk kilobayt arasında geliyor; altı kesim iki yüz kilobaytı rahatça geçiyor ve o yük her ilk ziyarette yeniden ödeniyor.

İtalik kesimleri de sorgula. Sitede gerçekten italik metin var mı, yoksa tarayıcının eğdiği sahte italikle idare edilebilir mi?

Yerel sunmak varsayılan olmalı

Yazı tipini üçüncü taraf bir CDN’den çekmek bir alan adı daha ekliyor ve tarayıcının o alan adına bağlanması zaman alıyor. Dosyayı kendi alan adından sunduğunda bu adım tamamen kalkıyor.

İkinci kazanç kontrol. Yerel dosyada alt küme çıkarabiliyor, önbellek süresini kendin belirleyebiliyor ve sürümün bir gün değişmeyeceğini biliyorsun.

Türkçe içerik için alt küme önemli. Bir yazı tipi dosyası Kiril, Yunan ve Vietnamca karakterleri de taşıyorsa boyutu birkaç kat büyüyor, ve o karakterler sitede hiç kullanılmıyor.

Görünme davranışını sen seçiyorsun

Dosya inerken tarayıcı ne yapacağını font-display özelliğinden okuyor.

swap metni hemen yedek yazı tipiyle gösteriyor, dosya geldiğinde de değiştiriyor. Metin ilk saniyeden itibaren okunabiliyor. Karşılığında bir sıçrama görünüyor.

optional daha katı: dosya çok hızlı gelmezse o yükleme için hiç kullanılmıyor ve sayfa yedek yazı tipiyle kalıyor. Sıçrama olmuyor.

Gövde metni için swap çoğu durumda doğru seçim oluyor, çünkü okunabilirlik yarım saniyelik bir gecikmeden ağır basıyor.

Sıçramayı küçültmek

Yedek yazı tipi ile asıl yazı tipinin harf genişlikleri farklı olduğunda değişim anında satırlar kayıyor. Bu kayma Cumulative Layout Shift olarak ölçülüyor ve düzeltmesi iki adımlı.

Birincisi, ilk ekranda kullanılan yazı tipi dosyasını önceden yüklemek. Tarayıcı böylece CSS’i çözümlemeyi beklemeden indirmeye başlıyor.

İkincisi, yedek yazı tipinin ölçülerini asıl olana yaklaştırmak. size-adjust, ascent-override ve descent-override özellikleriyle yerel bir yedek tanımlanıyor ve değişim gözle görülmeyecek kadar küçülüyor.

Kontrol

Sayfayı yavaş bağlantı benzetimiyle aç. İlk iki saniyeyi izle.

Metin hiç görünmüyorsa font-display ayarı eksik. Metin görünüyor ama sonra satırlar kayıyorsa yedek yazı tipinin ölçüleri ayarlanmamış demektir ve iki adımın ikincisi atlanmıştır. İkisi de yoksa iş bitmiştir.