Web Fontu Nedir?
Kısa tanım
Web fontu, kullanıcının cihazında yüklü olması gerekmeden CSS'teki @font-face kuralıyla sunucudan indirilip sayfada kullanılan yazı tipi dosyasıdır; günümüzde standart format WOFF2'dir. Web fontları markaya uygun, tutarlı bir tipografi sağlar, ancak her biri ek bir indirmedir: geç gelen font metnin bir süre görünmez kalmasına (FOIT) veya font değişirken sayfanın kaymasına (FOUT) yol açabilir. font-display, preload ve alt kümeleme bu etkiyi yönetir.
Diğer adları: Web Font, @font-face, WOFF2, özel yazı tipi
Font neden geç keşfedilir?
Bir web fontu CSS'te şöyle tanımlanır:
@font-face {
font-family: "Kurum Sans";
src: url("/fonts/kurum-sans-latin.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
}Bu tanım tek başına indirme başlatmaz. Tarayıcı fontu ancak HTML'i ayrıştırıp CSS'i indirdikten, render ağacını kurduktan ve bu fonta ihtiyaç duyan görünür bir metin bulduktan sonra ister. Font, kritik render yolunun en sonunda keşfedilen kaynaklardan biridir; harici bir font servisinin CSS'i kullanılıyorsa zincire bir halka daha eklenir.
FOIT, FOUT ve font-display
Font gelene kadar tarayıcının iki seçeneği vardır: metni gizlemek (FOIT, flash of invisible text) veya önce yedek fontla gösterip font gelince değiştirmek (FOUT, flash of unstyled text). font-display bu davranışı belirler:
| Değer | Metin gizli kalır | Font gelirse değiştirilir | Uygun kullanım |
|---|---|---|---|
block | Yaklaşık 2–3 saniye | Her zaman | İkon fontları gibi yedeğin anlamsız olduğu durumlar |
swap | Hiç | Her zaman | Marka kimliği için fontun mutlaka görünmesi gereken başlıklar |
fallback | Yaklaşık 100 ms | Yaklaşık 3 saniye içinde gelirse | Gövde metni için dengeli seçenek |
optional | Yaklaşık 100 ms | Hayır; gecikirse o ziyarette yedek font kalır | Performansın öncelikli olduğu gövde metni |
swap metni hemen gösterir ama değişim anında satırlar kayabilir; optional kaymayı önler ama yavaş bağlantıda markanın fontu hiç görünmeyebilir.
Değişimin yarattığı kaymayı azaltmak
Yedek font ile web fontunun harf genişlikleri ve satır yükseklikleri farklıysa değişim anında paragraflar yeniden akar ve bu CLS değerine yansır. @font-face içindeki size-adjust, ascent-override ve descent-override tanımlayıcılarıyla yerel bir yedek font, web fontunun ölçülerine yaklaştırılabilir. Bazı framework'ler bu ayarları derleme sırasında otomatik hesaplar.
Daha az bayt: WOFF2, alt kümeleme, değişken fontlar
- WOFF2: Bugünün tarayıcılarında evrensel desteğe sahiptir ve WOFF'tan yaklaşık %30 daha iyi sıkıştırır. TTF veya EOT gibi eski formatları sunmaya genellikle gerek kalmaz.
- Alt kümeleme (subsetting): Bir font binlerce karakter içerebilir;
unicode-rangeile her dil grubu ayrı dosyaya bölünür ve tarayıcı yalnızca sayfada geçen karakterlerin dosyasını indirir. Türkçe için dikkat edilmesi gereken nokta şudur: ç, ö ve ü temel Latin-1 aralığındayken ğ, ş, ı ve İ Latin Extended-A aralığındadır. Sadece “latin” alt kümesi yüklenirse bu harfler yedek fontla çizilir ve kelimelerin içinde farklı görünen harfler oluşur. - Değişken fontlar: Normal, kalın ve yarı kalın gibi ağırlıkları tek dosyada taşır. Üç dört ağırlık kullanan sitelerde ayrı dosyalardan daha hafif olabilir; tek ağırlık kullanılıyorsa gereksiz büyük olabilir.
Preload ve barındırma kararı
İlk ekranda kullanılan bir veya iki font için preload, tarayıcının fontu CSS'i beklemeden istemesini sağlar:
<link rel="preload" href="/fonts/kurum-sans-latin.woff2"
as="font" type="font/woff2" crossorigin>Fontlar CORS kipinde istendiği için crossorigin niteliği aynı alan adında bile gereklidir; unutulursa dosya iki kez indirilir. Preload'u gereğinden fazla font için kullanmak ise bant genişliğini daha kritik kaynaklardan çalar.
Fontları üçüncü taraf bir servisten almak ile kendi sunucunuzda barındırmak arasındaki performans farkı tek yönlü değildir. Tarayıcıların önbelleği siteye göre bölmesiyle “kullanıcıda zaten vardır” avantajı ortadan kalktı; harici servis ise ek bir bağlantı gerektirir ve bunun maliyeti preconnect ile ancak kısmen azaltılabilir. Kendi sunucusunda barındırmak, önbellek başlıklarını ve alt kümeleri kontrol etme imkânı verir ve ziyaretçinin IP adresinin üçüncü bir tarafa iletilmesini de önler. Font seçiminin okunabilirlik tarafı ise tipografi maddesinde ele alınıyor.