Yazı tipi kullanımı çoğu web sayfasında yaygındır ve sıklıkla hatalar içerir. Bu hataların çoğu web performansı bütçesini olumsuz etkiler. Bu makale, web yazı tipi kullanımı hakkında bilgi sağlamayı ve web performansınızı artırmanıza yardımcı olmayı amaçlamaktadır.
Herhangi bir web sayfası oluşturulurken uygulanan hiyerarşide gösterildiği gibi, yazı tipi öğeleri, diğer öğelerin oluşturulmasını yüklenene kadar geciktirebilir. Bu gecikmenin doğru yönetilmesi hem Kümülatif Düzen Kayması (CLS) hem de kullanıcı algısı açısından önemlidir.
Yazı Tipi Yükleme Sorunu
Sayfanın yazı tipleri yüklenene kadar, HTML ve CSS oluşturma işlemi sırasında yazı tiplerinin görünürlüğü tarayıcıdan tarayıcıya farklılık gösterir. Farklı tarayıcıların bu durumu nasıl ele aldığının bir özetini burada bulabilirsiniz:
| Browser | Yazı tipi hazır değilse varsayılan davranış… |
|---|---|
| kenar | Yazı tipi hazır olana kadar sistem yazı tipini kullanır. Yazı tipini değiştirir. |
| krom | Metni 3 saniyeye kadar gizler. Metin hala hazır değilse, yazı tipi hazır olana kadar sistem yazı tipini kullanır. Yazı tipini değiştirir. |
| Firefox | Metni 3 saniyeye kadar gizler. Metin hala hazır değilse, yazı tipi hazır olana kadar sistem yazı tipini kullanır. Yazı tipini değiştirir. |
| Safari | Yazı tipi hazır olana kadar metni gizler. |
Bu sorunu güvenmeden çözmek için tarayıcı davranışı hakkındafont-display parametresi tanıtıldı. Şu anda tarayıcıların %92'si font-display parametresini desteklemektedir.
Yazı Tipi Gösterimi Ne İşe Yarar?
Sayfa yükleme işlemi sırasında yazı tiplerinin görünümü, tarayıcıya bağlı olarak tamamen yüklenene kadar değişiklik gösterebilir. Örneğin, Safari tarayıcısının bazı sürümleri, yazı tipi yüklenene kadar metni gizler. yazı tipi ekranı: takas CSS parametresi, yazı tipi dosyaları yüklenene kadar metni bir sistem yazı tipi kullanarak görüntüleyerek bu davranışı standartlaştırır. Yazı tipleri yüklendikten sonra sistem yazı tipi amaçlanan yazı tipiyle değiştirilir. İşte bir örnek kullanım:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Yazı Tiplerini Önceden Yükleme
Kullanma Fontları kritik oluşturma yolundan önce yüklemek, fontlar yüklenirken boşlukları önleyebilir.
BONUS: Yazı Tipi Kullanımına Endüstri Yaklaşımı
Benzer Teknoloji verilerine göre gelin internet dünyasının önemli bir trendine ve anlık görüntüsüne bir göz atalım. Aşağıdaki ilk grafik yazı tipi kullanımını göstermektedir ilk 10,000 sayfada ve ikinci grafikte ilk 100,000 sitedeki yazı tipi kullanımı gösteriliyor. Önce bu grafikleri inceleyelim:
Google Font ve Font Awesome kullanımında ilk 5 site ile ilk 10,000 site arasında %100,000 fark var. Bu bize en iyi 10,000 sitenin yazı tipi kullanımını optimize ettiğini gösteriyor. Dikkate değer bir konu olarak bunu incelemenizi öneririz. Web yazı tiplerini kendi çözümlerinizle nasıl uygulayabileceğinizi düşünün.
BONUS 2: Google Font ve Font Awesome'in Kullanım İstatistikleri
İlk bonusa atıfta bulunarak, en çok kullanılan yazı tipi kitaplıklarının sayısal kapsamını gösteren iki grafiği incelemenizi öneririz. Buradaki benzersiz alan adlarının sayısı milyonları aşıyor, ve bu milyonlar SEO rakiplerinizi temsil ediyor. Bu kitaplıkları diğerlerinden daha iyi ve daha optimum şekilde kullanmak, öne çıkmanıza yardımcı olabilir.
Bu ipuçlarını takip ederek ve yazı tipi kullanımınızı optimize ederek web performansınızı ve kullanıcı deneyiminizi önemli ölçüde artırabilirsiniz.
