Web Font Optimizasyonu: Yerel Barındırma ve font-display

Okuma süresi: 2 dk

Kısa yanıt: Kullandığınız font ailesi ve ağırlık sayısını azaltın, fontları WOFF2 formatında kendi sunucunuzdan sunun, @font-face kurallarına font-display: swap ekleyin ve sayfanın üstünde kullanılan bir veya iki font dosyasını preload ile önceden yükleyin. Türkçe karakterleri içeren “latin-ext” alt kümesini dahil etmeyi unutmayın.

Bu rehber kimin için: Tasarım ve hız optimizasyonu yapanlar · Gereken süre: 20 dakika · Seviye: Orta

Her font ağırlığı (normal, kalın, italik) ayrı bir dosyadır ve dört ağırlık kullanan iki font ailesi sekiz dosya indirtir. Fontlar harici bir sunucudan geliyorsa ek DNS ve bağlantı süresi eklenir. Ayrıca Avrupa’daki bazı yargı kararları, Google Fonts’un ziyaretçi IP’sini üçüncü tarafa ilettiği gerekçesiyle yerel barındırmayı gizlilik açısından da gündeme getirmiştir.

Optimizasyon adımları

Envanter: Tarayıcının Ağ sekmesinde “Font” filtresiyle yüklenen font dosyalarını sayın.
Azaltın: Kullanılmayan ağırlıkları kaldırın; mümkünse tek bir değişken font (variable font) kullanın.
Yerel barındırın: Fontları WOFF2 olarak indirip tema klasörüne koyun veya temanızın “fontları yerel yükle” seçeneğini açın.
Alt küme: Türkçe karakterler (ğ, ş, ı, İ) için latin ve latin-ext alt kümelerini dahil edin.
font-display: @font-face kurallarına font-display: swap ekleyin; metin önce yedek fontla görünür.
Preload: Başlıkta kullanılan font dosyasını link rel="preload" as="font" type="font/woff2" crossorigin ile önceden yükleyin.
Önbellek: Font dosyalarına uzun tarayıcı önbelleği süresi verin.

Düzen kaymasını azaltma

swap kullanırken web fontu yüklendiğinde metin genişliği değişirse sayfa kayar. Yedek fontun ölçülerini web fontuna yaklaştırmak için size-adjust ve ascent-override gibi @font-face tanımlayıcıları kullanılabilir; ayrıntılar için CLS sorunu rehberine bakın.

Hâlâ çözülmediyse

Fontlar başlık metninizi LCP öğesi olarak geciktiriyorsa LCP iyileştirme adımlarına bakın. Sonucu site hız testi ile ölçün. LiteSpeed web sunucusunda çalışan WordPress hosting paketlerimizde font dosyaları da diğer statik dosyalar gibi sitenizin kendi alan adından sunulur.

Sık sorulan sorular

Sistem fontları kullanmak mantıklı mı?

Evet; hiç dosya indirmez ve en hızlı seçenektir.

Türkçe karakterler farklı fontta görünüyor.

latin-ext alt kümesi yüklenmemiştir; font dosyanızın Türkçe karakterleri içerdiğinden emin olun.

İlgili rehberler

Bu rehber işinize yaradı mı?