Web Font Optimizasyonu: Performans ve Tipografi

Web fontları, sitenizin görsel kimliğinin önemli bir parçasıdır. Ancak optimize edilmemiş fontlar, sayfa yükleme süresini ciddi şekilde artırabilir, görünmez metin (FOIT) veya stil değişimi (FOUT) sorunlarına yol açabilir ve Core Web Vitals skorlarınızı olumsuz etkileyebilir. Bu rehberde web fontlarını performanslı bir şekilde kullanmanın yollarını ele alacağız.

font-display Özelliği

font-display, font dosyası yüklenirken tarayıcının nasıl davranacağını kontrol eder. Beş değer alır:

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit.woff2') format('woff2');
  font-display: swap;
}

auto — Tarayıcıya bırakır (genellikle block gibi davranır)
block — Font yüklenene kadar metin görünmez (3 saniye blok süresi)
swap — Sistem fontuyla hemen gösterir, font gelince değiştirir (önerilen)
fallback — Kısa blok (100ms), sonra sistem fontu, font 3 saniye içinde gelmezse değiştirmez
optional — Çok kısa blok, font hemen hazırsa kullanır, değilse kullanmaz

Çoğu site için font-display: swap en iyi seçimdir. İçeriğin hemen görünmesini sağlar ve kullanıcı deneyimini iyileştirir.

Font Subsetting

Bir font dosyası genellikle yüzlerce veya binlerce glif içerir. Subsetting ile yalnızca kullandığınız karakterleri içeren bir font dosyası oluşturursunuz:

/* Yalnızca Latin ve Türkçe karakterleri dahil et */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0100-024F, U+011E-011F,
                 U+0130-0131, U+015E-015F;
}

unicode-range ile tarayıcı, sayfada bu karakterler kullanılmadığı sürece font dosyasını indirmez. Türkçe karakterler için şu ek aralıkları eklemeyi unutmayın:

U+011E-011F — Ğ, ğ
U+0130-0131 — İ, ı
U+015E-015F — Ş, ş
U+00C7, U+00E7 — Ç, ç
U+00D6, U+00F6 — Ö, ö
U+00DC, U+00FC — Ü, ü

Preloading ile Erken Yükleme

Kritik fontları <link rel="preload"> ile önceden yükleyerek render süresini kısaltabilirsiniz:

<head>
  <link rel="preload" href="/fonts/outfit-regular.woff2"
        as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/fonts/outfit-bold.woff2"
        as="font" type="font/woff2" crossorigin>
</head>

Önemli: crossorigin özniteliği, font kendi sunucunuzdan bile yüklense gereklidir. Preload ile yalnızca kritik fontları (above-the-fold içerikte kullanılanları) yükleyin — her fontu preload etmek performansı olumsuz etkiler.

WOFF2 Formatı

WOFF2, web için optimize edilmiş en verimli font formatıdır:

WOFF'a göre ortalama %30 daha küçük dosya boyutu
Brotli sıkıştırma algoritması kullanır
Tüm modern tarayıcılar destekler

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit.woff2') format('woff2'),
       url('/fonts/outfit.woff') format('woff'); /* fallback */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Değişken Fontlar (Variable Fonts)

Değişken fontlar, tek bir dosyada birden fazla ağırlık, genişlik ve stil varyasyonunu barındırır:

@font-face {
  font-family: 'Outfit';
  src: url('/fonts/Outfit-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; /* tüm ağırlıklar tek dosyada */
  font-display: swap;
}

/* İstediğiniz ağırlığı kullanın */
h1 { font-weight: 700; }
p { font-weight: 400; }
.light { font-weight: 300; }

4-5 farklı ağırlık kullanıyorsanız, değişken font tek bir HTTP isteğiyle tümünü karşılar ve toplam dosya boyutu genellikle daha küçük olur.

Sistem Font Yığınları (System Font Stack)

Performansı en üst düzeye çıkarmak istiyorsanız, sistem fontlarını kullanmayı düşünebilirsiniz:

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

Bu yaklaşım sıfır ek HTTP isteği gerektirir ve metin anında render edilir. GitHub, Bootstrap 5 ve birçok modern uygulama bu yöntemi kullanır.

CLS (Layout Shift) Önleme

Font yüklenmesi sırasında oluşan metin boyutu değişikliği, CLS skorunuzu olumsuz etkiler. Bunu önlemek için:

font-display: swap veya optional kullanın
Fallback fontun metrik değerlerini web fontla eşleştirin (size-adjust, ascent-override, descent-override)
Kritik fontları preload ile erken yükleyin
Font dosya boyutunu subsetting ile küçültün

/* Fallback font metriklerini ayarlama (CSS) */
@font-face {
  font-family: 'Outfit-Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Fontlarınız için uyumlu eşleşmeler bulmak mı istiyorsunuz? SiteScripti'nin Font Eşleştirme aracını kullanarak web fontlarınıza en yakın sistem fontlarını keşfedebilirsiniz.

Bu konuyla ilgili araçlarımızı da deneyin: Page Speed Analiz, CSS/JS Sıkıştırma, Web Vitals Analiz