Kendinize Özel Font Kitaplığı: WOFF2 Alt Kümesi ile Performans Artışı
Merhaba tasarım severler! Bugün sizlere tasarım kütüphanenizde neredeyse köle gibi çalışan ama optimum performans sağlayan bir yapıdan bahsedeceğim: **WOFF2 alt kümesiyle özelleştirilmiş font kitaplığı**.
[H3]Neden Alt Kümesi?[/H3]
Modern web projelerinde font dosyaları çoğu zaman 300‑500 KB arası olabilir. Bu da sayfa yükleme zamanını havaya uçurur. Özellikle bir sayfada yalnızca 12 font karakteri kullanıyorsanız, bütün karakter setini iletmek fazla. Alt küme, sadece ihtiyaç duyduğunuz karakterleri tutar ve dosya boyutunu %70‑80 oranında düşürür.
[H3]Nasıl Kurulur?[/H3]
1. **Fontları seçin** – Örneğin, *Inter* ya da *Poppins* gibi Google Fonts.
2. **Bir alt küme oluşturucu**
- *Font Subsetter* (GitHub) ya da online araçlar (e.g., Transfonter, Fontsubset) kullanarak sadece projenizdeki karakterleri seçin.
3. **WOFF2 dosyasını alın** – Önerilen codec ile minify edin.
4. **CSS’e ekleyin**:
```css
@font-face {
font-family: "Inter";
src: url("fonts/inter-subset.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
```
5. **Tasarım Kütüphanesi** – Bu tek dosyayı global `fonts/` klasörüne koyun ve bir JavaScript veya SCSS modülü ile `import './fonts/inter-subset.woff2';` şeklinde entegre edin.
[H3]Avantajları[/H3]
- **Azaltılmış Ağ Trafiği** – Sürekli tek tek istek yerine tek bir büyük dosya talep edilir.
- **Hızlı Render** – `font-display: swap;` sayesinde metinler bir önceki font ile görünür, sonra yeni font yüklendiğinde değişir.
- **Kolay Yeniden Kullanım** – Her sayfada aynı alt küme paylaşılır, tutarlı görünüm.
[H3]Kahraman Örnek: Küçük Bir Blog Projesi[/H3]
Ben *Bir Blog* projemde “+/-” karakterlerini (kullanıcı tahmini karakterleri), bazı özel simgeleri ve geniş çarpıklığı içeren ‘İ’ harfini kullanıyorum. Alt küme oluşturarak 68 KB’yi 12 KB’ye düşürdüm. Yükleme süresinde belirgin bir iyileşme görüyorum! IG devindeki Performans testleri ile
**100 ms: 12 KB** (alt küme) vs **400 ms: 68 KB**
arasına geçiş yaptım.
[H3]Son Düşünceler[/H3]
Font alt kümesi, tasarım kütüphanenizin hafifliğini artırırken kaliteyi de korumaya yardımcı olur. Bence herkes bir gün bu yöntemle bir kitaplık oluşturmalı. O yıl, belki de tasarım kütüphane kitaplarınızın hafızasını özetleyen bir derleme yazabilirsiniz – ama bu konuşma için bir erteleyelim!
Kendinizde denemek için basit bir örnek hazır tutun, fazlasıyla keyifli bir süreç.
