Web fontları: Performans, font-display ve lisans açısından doğru kullanım
· PoolByte Technology
Kurumsal kimliğin önemli bir parçası olan web fontları, sitenin hızını ve görsel kararlılığını sanıldığından fazla etkiler. Her font ağırlığı ve stili ayrı bir dosyadır; dört farklı ağırlık ve iki italik kullanan bir site, metni göstermeden önce altı ayrı dosya indirmek zorunda kalabilir. Font geç yüklendiğinde metin bir süre görünmez kalabilir ya da yüklenince yer değiştirerek sayfa düzenini kaydırabilir.
Bu yazıda web fontlarını hem hızlı hem de lisans açısından doğru kullanmak için uygulanabilir adımları ele alıyoruz.
Kaç font dosyası kullandığınızı sayın
Web fontları için ilk adım envanterdir. Tarayıcının geliştirici araçlarında Ağ sekmesini açın, filtreyi fontlarla sınırlayın ve sayfa açılırken kaç dosyanın indirildiğine bakın. Tasarımda gerçekten kullanılan ağırlıkları belirleyin; çoğu site için bir veya iki font ailesi ve aile başına iki üç ağırlık yeterlidir.
Birçok ağırlık gerekiyorsa değişken (variable) fontlar iyi bir seçenektir. Tek bir dosya, ince ile kalın arasındaki tüm ağırlıkları içerebilir ve toplamda birden çok ayrı dosyadan daha küçük olabilir.
WOFF2 formatını kullanın
WOFF2, web için tasarlanmış sıkıştırılmış font formatıdır ve güncel tarayıcıların tamamına yakını tarafından desteklenir. TTF veya OTF dosyalarını doğrudan sunmak yerine WOFF2 sürümlerini kullanın. Çok eski tarayıcı desteği gerekmiyorsa ek formatlar eklemenize de gerek yoktur.
Alt kümeleri Türkçe karakterleri unutmadan oluşturun
Bir font dosyası binlerce karakter içerebilir; siteniz bunların yalnızca bir kısmını kullanır. Alt küme (subset) oluşturmak, kullanılmayan karakterleri çıkararak dosyayı küçültür. Burada dikkat edilmesi gereken nokta Türkçe karakterlerdir: yalnızca temel Latin alt kümesini kullanırsanız ğ, ş, ı, İ gibi harfler başka bir fonttan gösterilir ve metin bozuk görünür. Türkçe için Latin Extended karakterlerinin alt kümeye dahil olduğundan emin olun.
Siteniz Arapça gibi farklı bir yazı sistemi de kullanıyorsa, o dil için ayrı bir font ve alt küme gerekir. unicode-range tanımıyla tarayıcının yalnızca sayfada gerçekten kullanılan karakter aralığının dosyasını indirmesini sağlayabilirsiniz.
font-display ile metni görünür tutun
font-display özelliği, font yüklenene kadar tarayıcının ne yapacağını belirler. swap değeri metni hemen yedek fontla gösterir ve web fontu yüklenince değiştirir; kullanıcı içeriği beklemeden okumaya başlar. optional ise font çok kısa sürede gelmezse o sayfa görüntülemesi için yedek fontla devam eder ve değişimden kaynaklanan kaymayı önler.
@font-face {
font-family: "Kurumsal Sans";
src: url("/fonts/kurumsal-sans.woff2") format("woff2");
font-weight: 400 700;
font-display: swap;
}Font değişimi sırasında oluşan kaymayı azaltmak için yedek fontu web fontunun ölçülerine yakın seçin veya size-adjust gibi tanımlarla boyutlarını eşleştirin. Bu kaymalar Core Web Vitals'taki CLS değerini etkiler; ayrıntılar Core Web Vitals rehberimizde yer alıyor.
Yalnızca kritik fontu önceden yükleyin
Sayfa açıldığında hemen görünen başlık ve gövde metninin fontunu preload ile önceden istemek, metnin daha erken doğru fontla görünmesini sağlar. Ancak her fontu önceden yüklemek, tarayıcının daha önemli kaynakları geciktirmesine yol açar. Bir veya iki dosyayla sınırlı kalın ve crossorigin niteliğini eklemeyi unutmayın.
<link rel="preload" href="/fonts/kurumsal-sans.woff2" as="font" type="font/woff2" crossorigin>Kendi sunucunuzda barındırmayı değerlendirin
Web fontlarını üçüncü taraf bir servisten yüklemek kolaydır; ancak tarayıcının ayrı bir sunucuya bağlantı kurmasını gerektirir ve kullanıcının IP adresi gibi bilgiler o servise iletilir. Fontları kendi alan adınızdan sunmak bu ek bağlantıyı ortadan kaldırır, önbellek sürelerini kendiniz belirlemenizi sağlar ve kişisel verilerin üçüncü taraflarla paylaşımını azaltır. Kişisel veri boyutunu KVKK uyumlu web sitesi rehberimizde ele aldık.
Font dosyalarına uzun önbellek süresi verin; bu dosyalar nadiren değişir. Değiştiğinde dosya adını değiştirerek tarayıcıların yeni sürümü almasını sağlayabilirsiniz.
Lisansı kontrol edin
Bir fontu bilgisayarınızda kullanma hakkınız olması, onu web sitenizde kullanabileceğiniz anlamına gelmez. Ticari fontlar genellikle masaüstü, web ve uygulama için ayrı lisanslanır; web lisansları bazen aylık görüntüleme sayısıyla sınırlıdır. Kullandığınız her fontun web üzerinde kullanıma izin verdiğini ve lisans belgesini sakladığınızı kontrol edin.
Google Fonts'taki fontların büyük bölümü SIL Open Font License ile dağıtılır. Bu lisans fontların web sitelerinde kullanılmasına, kendi sunucunuzda barındırılmasına ve alt küme oluşturulmasına izin verir; yine de lisans metnindeki koşulları okumak iyi bir alışkanlıktır.
Sık sorulan sorular
Sistem fontları kullanmak yeterli mi?
Hız açısından en hafif seçenek, cihazda zaten yüklü olan sistem fontlarıdır. Marka kimliğiniz belirli bir yazı tipi gerektirmiyorsa, iyi seçilmiş bir sistem font yığını hem hızlı hem okunaklı bir sonuç verir.
Arapça içerik için ayrı font gerekir mi?
Evet. Latin harfleri için tasarlanmış fontların çoğu Arapça karakterleri içermez. Arapça içerik için bu yazı sistemini destekleyen bir font seçin ve yalnızca Arapça sayfalarda yüklenmesini sağlayın.