Google Fonts Performans Optimizasyonu: Hız Kaybetmeden Font Kullanma (2026)
Google Fonts Neden Yavaşlatır?
Google Fonts, 1.500'den fazla ücretsiz font sunan en popüler web font servisidir. Ancak varsayılan yüklemesinde birden fazla HTTP isteği, render-blocking CSS ve gereksiz karakter setleri sayfa hızını ciddi şekilde düşürebilir. Özellikle CLS (Cumulative Layout Shift) ve LCP (Largest Contentful Paint) metriklerini olumsuz etkiler.
Font Yükleme Stratejileri
1. Self-Hosting (Kendi Sunucunuzda Barındırma)
Google Fonts'u kendi sunucunuzda barındırmak, üçüncü parti DNS çözümleme ve SSL handshake gecikmesini ortadan kaldırır. google-webfonts-helper veya fontsource gibi araçlarla fontları WOFF2 formatında indirip projenize ekleyin.
2. font-display: swap
Bu CSS özelliği, font yüklenene kadar yedek sistem fontunu gösterir ve FOIT (Flash of Invisible Text) sorununu ortadan kaldırır. Google Fonts URL'ine &display=swap parametresi ekleyerek veya @font-face kuralında font-display: swap; belirterek kullanabilirsiniz.
3. Unicode Range ile Subset
Sadece ihtiyacınız olan karakter setlerini yükleyin. Türkçe site için Latin Extended yeterlidir — Kiril, Arapça veya Yunanca karakterleri yüklemeye gerek yoktur. Bu tek başına font dosyası boyutunu %60-80 küçültebilir.
4. Preload ile Kritik Fontları Önceden Yükleme
<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin> etiketi ile ana fontunuzu HTML'in en başında yüklemeye başlarsınız. Bu, LCP skorunu doğrudan iyileştirir.
Kaç Font Kullanmalısınız?
Performans ve tasarım dengesi için maksimum 2 font ailesi (bir başlık, bir gövde) ve toplam 4 varyant (Regular, Bold, Italic, Bold Italic) yeterlidir. Her ek font varyantı ortalama 20-50 KB ek yük demektir.
Font Performansını Ölçme
PageSpeed Test aracımızla sitenizi tarayın. "Eliminate render-blocking resources" veya "Ensure text remains visible during webfont load" uyarıları font optimizasyonunuz gerektiren sinyallerdir.
Sıkça Sorulan Sorular
System font stack kullanmak en hızlı çözüm mü?
Evet, font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; gibi bir system font stack sıfır ek HTTP isteği ile en hızlı çözümdür. Ancak markalaşma ve görsel tutarlılık adına özel font kullanmak istiyorsanız yukarıdaki optimizasyonları uygulamanız yeterlidir.