Web Font Optimizasyonu & Variable Font Kullanımı

Bir web sitesinin ilk açılışında yaşanan metin kaymaları (CLS) ve gecikmelerin bir numaralı sebebi çoğunlukla optimize edilmemiş web fontlarıdır.

Canlı Değişken (Variable) Font Stüdyosu

Aşağıdaki interaktif panelde font kalınlığı (weight), harf aralığı (letter-spacing) ve satır yüksekliğini (line-height) canlı olarak test edebilir, kendi metninizi yazabilirsiniz:

3 Temel Font Kuralı:

1. Sadece WOFF2 Kullanın: Modern tarayıcıların tamamı WOFF2 destekler. Eski TTF/OTF formatlarını yüklemenize gerek yok.
2. Variable Font Tercih Edin: 6 farklı font ağırlığı dosyası yerine tek bir değişken (variable) font dosyası hem istek sayısını 1'e indirir hem de her ağırlığı kullanmanıza izin verir.
3. font-display: swap: Yazı tipi inerken kullanıcının boş ekran görmesini engeller.

@font-face {
  font-family: 'Sora';
  src: url('/fonts/sora-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}