Her rotanın tarayıcıdan istediği yazı tipi işini azaltın
Ana sayfa, dönüşüm sayfaları, oturum açmış görünümler ve farklı tasarım sistemleri içeren şablonlarda soğuk önbellek yazı tipi isteklerini envanterleyin. Aileyi, ağırlığı, stili, dosyayı, kaynağını, transfer boyutunu ve seçiciyi not edin. Bir @font-face bildirimi tek başına indirmeyi tetiklemez; tarayıcı normalde mevcut düzen onu kullandığında bir yüzü alır. Bu nedenle kullanılmayan global ağırlıklar ve stiller önce kaldırmaya değerdir.
Gerçekten marka değeri taşıyan yerde özel tipi kullanın; genellikle display başlıklarda anlamlıdır ve tasarım izin veriyorsa normal gövde metni için bir sistem yığını (system stack) düşünün. Bir variable font her zaman daha küçük olduğunu varsaymayın: birkaç statik dosyanın yerine geçebilir ama tek bir statik yüzten daha büyük olabilir. Rota tarafından gerçekten istenen sıkıştırılmış varlıkları karşılaştırın.
Test edilmiş rota düzeyinde kullanımı olmayan aileleri, ağırlıkları, italikleri ve ikon fontları kaldırın.
Yapıda değişiklik yapmadan önce lisansın web teslimatına, alt kümelemeye (subsetting) ve kendi sunucunuzda barındırmaya izin verdiğini kontrol edin.
Gerekli karakterleri kaldırmadan WOFF2 ve alt kümeler (subsetting) kullanın
Modern tarayıcılar için temel olarak WOFF2 ile başlayın. W3C Recommendation WOFF2’yi geliştirilmiş sıkıştırma ve hızlı açma için tasarlanmış bir web-font paketi olarak tanımlar ve büyük tarayıcılarda uygulanmıştır. Belgelenmiş eski tarayıcı gereksinimi olmadıkça başka bir formatı sadece uyumluluk amacıyla tutun; aksi halde iyi tasarlanmış bir fallback daha güvenli bir uyumluluk yoludur.
Alt kümeleme (subsetting), seçilen glifleri veya karakter şekillerini içeren daha küçük bir dosya oluşturur. unicode-range, tarayıcının ilgili bir dosyayı seçmesine yardımcı olacak karakter aralıklarıyla alt kümeleri ilişkilendirebilir. Gerçek sayfalardan ve desteklediğiniz dillerden; noktalama, para birimleri, isimler, yasal metin ve kullanıcı girdisi betiklerini içerecek şekilde alt kümeler oluşturun. Eksik glifler doğruluk (correctness) sorunudur; kabul edilebilir bir byte tasarrufu değildir.
Sadece İngilizce tasarım örnekleriyle değil, temsilî yerelleştirilmiş sayfalar ve form girdileriyle test edin.
Her alt kümenin unicode-range ve ağırlık/stil aralığının dağıtımdaki dosyayla eşleştiğinden emin olun.
Yedek (fallback) ve font-display politikasını birlikte tasarlayın
Yedek yazı tipi, özel yüz hazır değilken kullanıcıların gördüğüdür. Benzer oranlar için onu seçin, sonra gerçek başlıkları, çok satırlı düğmeleri, navigasyonu, tabloları, formları ve uzun yerelleştirilmiş dizeleri karşılaştırın. Farklı genişlikler sarma davranışını değiştirir; farklı ascent, descent veya line-gap blok yüksekliğini değiştirir. Her ikisi de sayfada zaten görünür olan içeriği hareket ettirebilir.
font-display, bir yüz kullanılabilir olmadığında render davranışını tanımlar. optional çok kısa bir block süresine ve swap dönemine sahip değildir; ilk ziyarette kararlı fallback tercih ediliyorsa gövde metni için uygun olabilir. swap fallback’ı hemen gösterir ve daha sonra web fontu uygulayabilir, ancak geç bir değişim rahatsız edici bir yeniden akışa neden olmayacak yerlerde kullanın. Block veya fallback test edilmiş tasarım gerekçesiyle seçilmelidir; küresel varsayılan olmamalıdır. CSS size-adjust bir yedeğin metriklerini ayarlamada yardımcı olabilir, ama her desteklenen betik ve görüntüleme alanını görsel olarak doğrulayın.
Ödeme, kurtarma, hesap, güvenlik veya gezinme metninin geç gelmesi muhtemel özel bir yazı tipine bağlı olmasına izin vermeyin.
Yedek bir harf yanlış anlam taşıyabilir; arayüz simgeleri için genellikle SVG ikonlar daha güvenlidir.
Keşfi iyileştirin, ancak preload’u sınırlayın ve veri akışını değerlendirin
Yalnızca harici bir stil sayfasında bildirilen bir yüz, o stil sayfası indirildiği ve ayrıştırıldığı zaman keşfedilebilir. Sürdürülebilir erken kritik CSS gerekli bildirimi daha erken ortaya çıkarabilir; font binary’sini inline etmeyin, bu dokümanı şişirir. Üçüncü taraf bir köken için preconnect bağlantıyı daha erken kurabilir. Yazı tipi istekleri CORS kaynaklarıdır; bu nedenle cross-origin teslimat ve preload doğru crossorigin işleme gerektirir.
Preload bir öncelik geçersiz kılmadır, her şeyi hızlandıran bir anahtar değildir. Diğer kritik işler ile yarışabilir ve bir rotanın asla ihtiyaç duymayacağı bir yüzü indirebilir; ayrıca unicode-range seçimini de atlayabilir. Geç keşfi önce düzeltin, sonra gerçekten ilk-görünüm dosyası olduğu kanıtlanmış en fazla bir dosyayı tam URL, as=font ve crossorigin ile preload edin. Google Fonts, API isteklerinin ziyaretçi IP adresini, istenen URL’yi, HTTP başlıklarını ve referer’ı içerdiğini; çerez ayarlamadığını veya günlüklemediğini ve toplanan bilgileri profiller veya hedefli reklamcılık için kullanmadığını bildirir; kendi sunucunuzda barındırmak bu yükler için Google’ın veri almasını durdurur. Teslimatı, gizlilik bildirimini, yargı yetkisini, sözleşmeleri ve gerektiğinde nitelikli danışmanlığı değerlendirin.
Soğuk önbellek izlerini karşılaştırın ve preloaded dosyanın rotada tüketildiğini doğrulayın.
Bağlantı kurulumu, önbellek ve CDN yeteneği, varlık bakımı ve ziyaretçi veri akışını tartın.
Yazı tipi varlıklarını versiyonlayın ve test edilmiş bir CSS fallback yapılandırmasını sürdürün.
Renderlanan davranışı test edin ve yazı tiplerini bir dayanıklılık bağımlılığı olarak yönetin
Soğuk önbellekle, CSS'den yazı tipi isteğine kadar zinciri, zamanlamayı, kaynağı, önbellekleme ve hataları tarayıcı ağ araçlarıyla inceleyin. Ardından kısıtlı bir bağlantıda tekrarlayın, sonra yazı tipini sınırlayın veya engelleyin. Başarı, özel yüz görünmeden önce okunabilir metin, kullanılabilir kontroller, doğru semboller ve tutarlı düzen sağlamak demektir. Gerçekçi dar ve masaüstü düzenlerini, uzun dizeleri, hata, onay/metin kopyalarını, fiyatları ve desteklenen her betiği test edin.
Chromium’da Performance panelinde bir yeniden yüklemeyi kaydedin ve Layout Shifts izini inceleyin; DevTools taşınan öğeleri belirleyebilir ve kaymayı canlandırabilir. Yazı tipi yüklemesi bilinen bir suçludur, ama taşınan öğe kesin neden olmayabilir; bu yüzden iz ile yazı tipi uygulamasını korelasyonlayın. Layout Instability API Chromium’e özeldir; bu da çapraz tarayıcı görsel kontrolleri önemli kılar. Yayına alma incelemesine yazı tipi varlıklarını, CORS davranışını, önbellek politikasını, fallbacks’i ve geri çekmeyi dahil edin. Amaçlanan bozulma modu okunabilir metin olmalıdır; boş içerik veya kırık gezinme değil.
Sıcak önbellek ilk isteği ve render sorununu gizleyebilir.
Dosyalar, CMS metni, şablonlar, sağlayıcılar veya CDN kuralları değiştiğinde kontrolü tekrarlayın.