Web Font Optimizasyonu: Yazi Tipi Performansi

Web Fontlari Neden Onemlidir?

Tipografi, bir web sitesinin gorsel kimliginin en onemli unsurlarindan biridir. Dogru font secimi markanizi guclendirirken, yanlis font kullanimi veya optimize edilmemis font yukleme stratejileri sayfa performansini ciddi sekilde olumsuz etkileyebilir. Web fontlari genellikle bir sayfanin toplam boyutunun %10-15'ini olusturur ve render-blocking kaynaklar arasinda yer alir.

2026 yilinda kullanici beklentileri her zamankinden yuksek. Bir sayfanin ilk anlamli boyamasi (First Contentful Paint) 1-2 saniyeyi astginda kullanicilarin buyuk kismi siteyi terk ediyor. Font optimizasyonu, bu kritik metrige dogrudan etki eden faktorlerden biridir. Bu rehberde, web fontlarinizi en verimli sekilde nasil yukleyeceginizi, performans uzerindeki etkilerini nasil minimize edeceginizi ve modern font teknolojilerinden nasil yararlanacaginizi detayli olarak ele aliyoruz.

Font Yukleme Problemleri

Web fontlari yuklenirken iki temel sorunla karsilasilir:

FOIT (Flash of Invisible Text)

Font dosyasi yuklenmeden once metin tamamen gorunmez olur. Kullanici bos bir sayfa gorur ve font yulendikten sonra metin aniden belirir. Bu durum ozellikle yavas baglantilarad cok kotu bir kullanici deneyimi yaratir.

FOUT (Flash of Unstyled Text)

Metin once bir yedek (fallback) fontla gosterilir, ardindan web fontu yuklendignde metin stili aniden degisir. Bu gecis sirasinda sayfa duzeni kayabilir (layout shift) ve CLS (Cumulative Layout Shift) metrigini olumsuz etkiler.

Her iki sorunun da cozumu, dogru font yukleme stratejisi secmekten gecer.

font-display Ozelligi

CSS font-display ozelligi, font yukleme davranisini kontrol etmenin en temel yoludur. @font-face kurali icinde kullanilir ve tarayiciya fontu nasil yukleyecegini soyler.

font-display: swap — Metin hemen yedek fontla gosterilir, web fontu yulendikten sonra degistirilir. FOUT yaratir ancak icerik hemen gorunur. Cogu web sitesi icin onerilen degerdir.
font-display: block — Metin kisa bir sure (genellikle 3 saniye) gorunmez kalir, sonra yedek fonta gecer. FOIT yaratir. Ikon fontlari icin uygun olabilir.
font-display: fallback — Cok kisa bir bloklama suresi (100ms), ardindan yedek font kullanilir. Font kisa surede yuklenirse degistirilir, yuklenemezse yedek font kalir.
font-display: optional — En performans odakli secenek. Tarayici fontu kullanip kullanmamaya kendisi karar verir. Yavas baglantilarida font atlanabilir. CLS'i minimize eder.
font-display: auto — Tarayicinin varsayilan davranisini kullanir. Genellikle onerilmez cunku tarayicilar arasi tutarsizlik yaratir.

Genel oneri olarak, govde metinleri icin swap veya optional, basliklar icin swap kullanmak iyi bir stratejidir.

Font Subsetting: Sadece Ihtiyaciniz Olani Yukleyin

Bir font dosyasi genellikle yuzlerce veya binlerce glif (karakter) icerir. Ancak cogu web sitesi bunlarin yalnizca kucuk bir bolumunu kullanir. Font subsetting, font dosyasindan yalnizca kullandiginiz karakterleri cikararak dosya boyutunu dramatik olarak azaltir.

Ornegin, Latin karakterli bir Turkce site icin font dosyasini yalnizca Latin Extended karakterleriyle sinirlamak, dosya boyutunu %60-80 oraninda azaltabilir. Arapca, Kiril veya CJK karakterlerine ihtiyaciniz yoksa bunlari cikarmak buyuk bir kazanc saglar.

Subsetting Araclari

pyftsubset (fonttools): Python tabanli, en guclu subsetting araci. Komut satirindan calisti, CI/CD pipeline'larina entegre edilebilir.
glyphhanger: Web sayfanizi tarayarak gercekten kullnilan karakterleri tespit eder ve buna gore subset olusturur.
Fontsquirrel Generator: Web tabanli, gorsel arayuzlu subsetting araci. Hizli ve kolay kullanim icin uygundur.
Google Fonts: URL parametreleri ile otomatik subsetting yapabilirsiniz. &text= parametresi ile yalnizca belirli karakterleri yukleyebilirsiniz.

Unicode Range

CSS unicode-range ozelligi ile tarayiciya hangi karakter araliklarinin hangi font dosyasindan yuklenecegini soyleyebilirsiniz. Tarayici, sayfada bu karakter araligina ait bir karakter bulamazsa font dosyasini hic yuklemez. Bu, gereksiz font indirmelerini onler.

Variable Fonts: Tek Dosya, Sinirsiz Varyasyon

Geleneksel fontlarda her agirlik (regular, bold, light) ve stil (italic, oblique) icin ayri dosyalar gerekir. Ornegin, 4 agirlik ve 2 stil kullaniyorsaniz, 8 ayri font dosyasi indirmeniz gerekir. Variable fonts, tum bu varyasyonlari tek bir dosyada birlestir.

Variable Font Avantajlari

Daha az HTTP istegi: 8 dosya yerine tek bir dosya indirilir.
Daha kucuk toplam boyut: Tek variable font dosyasi genellikle birden fazla statik font dosyasindan daha kucuktur.
Sinirsiz ara degerler: 400 ve 700 gibi sabit degerlere sinirli kalmak yerine, 423 veya 651 gibi herhangi bir degeri kullanabilirsiniz.
Dinamik tipografi: CSS animasyonlari ile font agirligini, genisligini ve optik boyutunu canlandirabilirsiniz.

Variable Font Eksenleri

wght (Weight): Font agirligi — ince (100) ile kalin (900) arasinda.
wdth (Width): Font genisligi — condensed ile expanded arasinda.
ital (Italic): Italik stili — 0 (normal) ile 1 (italik) arasinda.
slnt (Slant): Egim acisi — ozel acilarda yatik metin olusturmak icin.
opsz (Optical Size): Optik boyut — kucuk ve buyuk metinler icin farkli optimize edilmis formlar.

Font Yukleme Stratejileri

1. Preload ile Oncelikli Yukleme

Kritik fontlarinizi <link rel="preload"> ile erken asamada yukleyerek FOIT/FOUT surelerini kisaltabilirsiniz. Bu yontem tarayiciya fontu en erken asamada indirmeye baslamasini soyler. Ancak dikkatli kullanilmalidir; cok fazla kaynak preload etmek diger kritik kaynaklarin yuklenmesini geciktirebilir.

2. Self-Hosting

Google Fonts gibi harici servisler kullanmak yerine fontlari kendi sunucunuzda barindirmak, ucuncu parti bagimliligi ortadan kaldirir, DNS cozumleme suresini azaltir ve gizlilik endiselerini giderir. WOFF2 formatini kullanarak en iyi sikistirma oranini elde edebilirsiniz.

3. Font Loading API

JavaScript FontFaceAPI'si ile font yukleme surecini programatik olarak kontrol edebilirsiniz. Fontun ne zaman yuklendigini tespit ederek CSS siniflarini degistirmek, ozel gecis animasyonlari uygulamak ve yukleme hatalarini ele almak mumkundur.

4. next/font ile Otomatik Optimizasyon

Next.js kullaniyorsaniz, next/font modulu font optimizasyonunu otomatik olarak yapar: build zamaninda font dosyalarini indirir ve self-host eder, otomatik subsetting uygular, CSS size-adjustile layout shift'i minimize eder ve harici ag isteklerini ortadan kaldirir.

Performans Olcme ve Izleme

Font optimizasyonunuzun etkisini olcmek icin asagidaki metrikleri ve araclari kullanin:

Lighthouse: "Ensure text remains visible during webfont load" denetimi ile font-display kullanminizi kontrol eder.
WebPageTest: Font yukleme zamanlamasini filmstrip gorunumunde gorebilir ve FOIT/FOUT durumlarini tespit edebilirsiniz.
Chrome DevTools: Network sekmesinde font dosyalarinizin boyutlarini, yukleme surelerini ve onbellekleme durumlarini inceleyebilirsiniz.
CLS Metrigi: Font degisimlerinin neden oldugu layout shift degerini izleyin. 0.1'in altinda tutmayi hedefleyin.

Font Optimizasyonu Kontrol Listesi

Font dosyalarinizi WOFF2 formatina donusturun — en iyi sikistirma oranini sunar.
Sadece kullandiginiz agirliklari ve stilleri yukleyin. Gerekmiyorsa extra bold veya condensed varyantlarini dahil etmeyin.
Font subsetting ile yalnizca ihtiyac duydugunuz karakter setini paketleyin.
Variable font kullanarak birden fazla dosya yerine tek dosya yukleyin.
font-display: swap veya optional degerini kullanarak metnin her zaman gorunur olmasini saglayin.
Kritik fontlar icin preload kullanin ancak en fazla 1-2 font dosyasi icin.
Fontlari self-host ederek ucuncu parti bagimliliklarini ortadan kaldirin.
Yedek (fallback) fontlarinizi web fontunuza yakin metriklerle secin, layout shift'i minimize edin.
Font dosyalarina uzun sureli cache basliklar ekleyin (Cache-Control: max-age=31536000).
Performans metriklerinizi duzenli olarak olcun ve izleyin.

Sonuc: Web font optimizasyonu, site performansini iyilestirmenin en etkili yollarindan biridir. Dogru format, akilli yukleme stratejileri ve modern teknolojiler (variable fonts, subsetting) kullanarak hem gorsel kaliteyi koruyabilir hem de sayfa hizinizi onemli olcude artirabilirsiniz. Megis olarak, her projede font optimizasyonunu oncelikli bir performans kriteri olarak ele aliyoruz.