Eğer web sitenizde TTF yazı tipleri sunuyorsanız, ihtiyacınız olan veriden yaklaşık %30 fazla veri gönderiyorsunuz. WOFF2, aynı yazı tipini significantly daha küçük bir dosyada sunar ve her modern tarayıcı tarafından desteklenir. Nasıl dönüştürebileceğinizi ve bu konunun sitenizin performansı için neden önemli olduğunu burada bulabilirsiniz.
Neden WOFF2?
WOFF2 (Web Open Font Format 2.0), TTF'ye göre yaklaşık %30 daha küçük font dosyaları oluşturmak için Brotli sıkıştırma kullanır, kalite kaybı olmadan. Font karakterleri, ipucu, harf aralığı ve tüm tipografik özellikler aynı şekilde korunur. Tarayıcı bir WOFF2 dosyasını yüklediğinde, orijinal TTF'den aynı veriye sıkıştırmayı açar.
Performans etkisi gerçektir. Yazı tipleri, render engelleyici kaynaklardır — tarayıcı, yazı tipleri yüklenene kadar metni görüntülemez. 120KB TTF, 84KB WOFF2 olarak dönüştürülürse, metin özellikle mobil bağlantılar üzerinde daha hızlı görünür. Google'ın Core Web Vitals ölçümü bunu doğrudan ölçer: daha küçük yazı tipleri Largest Contentful Paint (LCP) ve yazı tipi değişimi nedeniyle Cumulative Layout Shift (CLS) değerini iyileştirir.
Tarayıcı desteği evrenseldir. Chrome, Firefox, Safari ve Edge WOFF2 desteği sunar. Desteklemeyen tarayıcılar yalnızca Internet Explorer ve çok eski Android tarayıcılarıdır — her ikisi de küresel trafiğin %1'inin altındadır.
Nasıl dönüştürülür
CSS'de WOFF2 kullanmak
WOFF2 dosyanızı aldıktan sonra, stiller dosyanızda referans olarak kullanın. En iyi uyumluluk için WOFF2'yi önce listeleyin ve TTF geri dönüşü kullanın:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.ttf') format('truetype');
font-display: swap;
}font-display: swap yönergesi tarayıcıya özel font yüklenene kadar yerine geçici metin gösterilmesini ve font yüklenince değiştirilmesini söyler, böylece font yüklenirken görünmeyen metin sorunu ortadan kalkar.
Font lisans uyumluluğu
Çok sayıda ticari font lisansı, font dosyalarını üçüncü taraf web servislerine yüklemeyi kısıtlayan maddeler içerir. Bu, bir sorun yaratır: performans için WOFF2'ye dönüştürmeniz gerekir, ancak çoğu dönüştürme aracı font dosyasını sunucuya yüklemeyi gerektirir.
Elbette, her zaman font lisansınızın özel koşullarını kontrol edin. Ancak Morph'un yerel sadece çalışması, en yaygın uyumluluk endişesini ortadan kaldırır.
Diğer yazı tipi dönüştürmeleri
Morph, OTF'den WOFF2'ye, WOFF'dan WOFF2'ye, TTF'den OTF'ye ve TTF, OTF, WOFF ve WOFF2 arasındaki her diğer kombinasyonu destekler. Başlamak için ücretsiz fontlar mı gerekiyor? Morph font kütüphanesinde 1,500+ ücretsiz font arasından göz atın.