Hızlı Özet (TL;DR)
Kurumsal kimliği yansıtan özel yazı tipleri (Typography) tasarımın vazgeçilmezidir; ancak kontrolsüz font kullanımı sayfa açılışını kilitleyen en büyük etkenlerden biridir. Google Fonts veya üçüncü taraf sunuculardan yüklenen fontlar ek DNS sorguları ve bağlantı gecikmeleri yaratır. Ayrıca tam set bir yazı tipi dosyası Çince, Kiril ve Arapça karakterleri de içerdiği için 300-500 KB boyuta ulaşabilir. Yerel WOFF2 barındırma, Türkçe alt kümeleme (Subsetting) ve font-display: swap ile font yükleme süresi sıfıra indirilir.
Font Formatları ve Verimlilik Kıyaslaması
| Format | Sıkıştırma Teknolojisi | Dosya Boyutu (Ortalama) | Tarayıcı Desteği | Öneri |
|---|---|---|---|---|
| TTF / OTF | Ham, sıkıştırmasız vektör | 150 KB – 300 KB | %100 | Web’de kesinlikle kullanılmamalı |
| WOFF | Gzip tabanlı sıkıştırma | 80 KB – 150 KB | %98+ | Eski sistemler için alternatif |
| WOFF2 | Brotli algoritmasıyla ultra sıkıştırma | 20 KB – 45 KB | %97+ | Kurumsal web için altın standart |
Font Subsetting (Alt Kümeleme) ile Boyutu %80 Küçültme
Bir font ailesinde binlerce nadir glif (karakter) bulunur. Kurumsal bir web sitesinde yalnızca Latin ve Türkçe karakterler kullanılıyorsa, kullanılmayan glifler dosyadan atılmalıdır:
- Standart font: 2.500 glif = 180 KB
- Subsetting sonrası (Latin + Latin Extended / Türkçe): 280 glif = 28 KB
Modern CSS @font-face ve font-display Kurgusu
Kullanıcının font yüklenene kadar boş beyaz bir ekranla karşılaşmasını (FOIT - Flash of Invisible Text) önlemek için modern CSS kurgusu:
@font-face {
font-family: 'KurumsalFont';
font-style: normal;
font-weight: 600;
font-display: swap; /* Font inene kadar sistem fontu görünür, takılma olmaz */
src: url('/fonts/kurumsal-font-v1.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F;
}
Kritik Fontları Preload ile Önden Yükleme
Sayfanın ilk ekranında yer alan <h1> başlığında kullanılan font dosyasını HTML head alanında önceden yükleterek LCP süresini kısaltabilirsiniz:
<link rel="preload" href="/fonts/kurumsal-font-v1.woff2" as="font" type="font/woff2" crossorigin />
Tipografisi kusursuz, açılışı ışık hızında web siteleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızdan uzman desteği alın.