Yavaş bir bağlantıda Türkçe bir sayfayı açtığınızda metnin önce sistem fontuyla göründüğünü, sonra web fontuna geçtiğini görürsünüz. Bazen bu geçiş iki adımda olur: önce harflerin çoğu yeni fonta geçer, ğ, ş ve İ ise bir an daha eski görünümde kalır. Sözcüğün ortasında iki farklı font görmenizin nedeni, Türkçenin iki ayrı font dosyasına bölünmesidir.
Türkçe neden iki dosya demek?
Google Fonts ve Fontsource, bir fontu Latin alfabesi için iki parçaya böler: temel Latin (latin) ve genişletilmiş Latin (latin-ext). ç, ö, ü ve ı ilk parçada, ğ, ş ve İ ikinci parçadadır. Her parça ayrı bir @font-face kuralıyla ve ayrı bir unicode-range ile tanımlanır.
MDN’in açıkladığı gibi tarayıcı, sayfada bir unicode-range aralığına düşen en az bir karakter varsa o dosyanın tamamını indirir. Türkçe bir sayfa iki aralığa da düştüğü için iki dosya ayrı ayrı istenir ve ayrı ayrı gelir. Hangisinin önce geleceği dosya boyutuna, sunucuya ve bağlantıya bağlıdır. İlk dosya geldiği anda o dosyanın kapsadığı harfler web fontuyla çizilir; ikinci dosya gelene kadar ğ, ş ve İ yedek fonttan gelmeye devam eder.
Ayrıntılı sayfası olan 200 fontta ölçtüğümüz dosya boyutları bu farkın neden olduğunu gösteriyor. Ortanca değerlerle temel Latin dosyası 27,6 KB, genişletilmiş Latin dosyası 18,3 KB. Ama bazı fontlarda genişletilmiş parça çok daha büyük: Inter’de 83,1 KB (temel parça 47,1 KB), Noto Sans’ta 164 KB (temel parça 35 KB). Bu fontlarda genişletilmiş parçanın sonra gelmesi ve Türkçe harflerin daha uzun süre yedek fontta kalması daha olası.
Font dosyalarının nasıl bölündüğünü ve kendi sunucunuzda nasıl tanımlanacağını kendi sunucunuzda barındırma yazımızda anlattık.
font-display ne yapar?
font-display, font dosyası henüz gelmemişken metnin nasıl gösterileceğini belirler. MDN bunu üç dönemli bir zaman çizelgesiyle anlatıyor:
- Engelleme dönemi: Font yüklenmemişse metin görünmez bir yedek fontla çizilir. Font bu dönemde gelirse normal biçimde kullanılır.
- Değiştirme dönemi: Font yüklenmemişse metin görünür bir yedek fontla çizilir; font bu dönemde gelirse yerine geçer.
- Başarısızlık dönemi: Font hâlâ gelmemişse yükleme başarısız sayılır ve normal yedek font kullanılır.
Değerler bu dönemlerin uzunluğunu ayarlar:
| Değer | Engelleme | Değiştirme |
|---|---|---|
| auto | tarayıcı belirler | tarayıcı belirler |
| block | kısa | sonsuz |
| swap | çok kısa | sonsuz |
| fallback | çok kısa | kısa |
| optional | çok kısa | yok |
MDN “kısa” ve “çok kısa” için saniye vermiyor; süreler tarayıcıya bırakılmış.
Türkçe sayfada hangi değer?
Her değer iki dosyanın her biri için ayrı ayrı işler, çünkü her dosya ayrı bir @font-face kuralıdır. Bu, Türkçe sayfada şu sonuçları doğurur:
- swap: Metin hemen yedek fontla görünür. Temel Latin dosyası gelince harflerin çoğu, genişletilmiş dosya gelince ğ, ş ve İ geçer. İki adımlı geçişi en çok bu değerde görürsünüz, ama metin hiçbir zaman gizlenmez. Google Fonts bağlantılarında sık kullanılan
display=swapbu değeri ayarlar. - block: Dosya gelene kadar metin kısa bir süre görünmez. Genişletilmiş dosya geç gelirse sözcüklerin içinde ğ, ş ve İ’nin yerinde bir an boşluk kalabilir.
- fallback: Kısa değiştirme dönemi geçtikten sonra gelen dosya o sayfa görüntüsünde kullanılmaz. Genişletilmiş dosya geç kalırsa ğ, ş ve İ o sayfada yedek fontta kalabilir, harflerin geri kalanı web fontunda.
- optional: Font çok kısa sürede gelmezse hiç kullanılmaz. İki dosyadan biri geç kalırsa aynı karışık görünüm ortaya çıkabilir; dosyalar önbelleğe girdikten sonraki ziyaretlerde sorun kalmaz.
Türkçe metin için en öngörülebilir sonuç, iki dosyanın aynı anda gelmesini sağlamakla elde edilir. Bunun yolu preload.
preload ile iki dosyayı birlikte istemek
MDN’in rel=preload sayfasına göre font ön yüklemesi, fontun çizim anında hazır olma ihtimalini artırır ve biçimsiz metin parlamasını (FOUT) azaltır. Fontlar için iki koşul var: as="font" yazılmalı ve crossorigin özniteliği, istek aynı sunucuya yapılsa bile eklenmeli, çünkü fontlar anonim CORS kipinde indirilir.
<link rel="preload" href="/fonts/lora-latin-wght-normal.woff2"
as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/lora-latin-ext-wght-normal.woff2"
as="font" type="font/woff2" crossorigin>Türkçe bir sitede iki dosyayı da ön yüklemek, ğ, ş ve İ’nin geri kalan harflerle aynı anda gelmesini sağlar. Yalnız temel Latin dosyasını ön yüklerseniz iki adımlı geçiş daha da belirginleşir: harflerin çoğu çok erken, Türkçe harfler daha geç gelir.
MDN’in örneğinde type="font/woff2" da yazılı. Sayfaya göre tarayıcı bu değere bakarak kaynağı destekleyip desteklemediğine karar verir ve desteklemiyorsa indirmez. Google Fonts’un kendi sunucusundan gelen dosyaların adresi sürüm değiştikçe değiştiği için ön yükleme pratikte kendi sunucunuzda tuttuğunuz dosyalarda işe yarar.
Ön yüklemeyi yalnız sayfanın ilk ekranında kullanılan font için yapın. Her ağırlığı ve her fontu ön yüklemek, sayfanın başka kaynaklarını geciktirir. web.dev’in font rehberi de en hızlı yüklenen fontun hiç istenmeyen font olduğunu hatırlatıyor ve sayfadaki font sayısını azaltmayı öneriyor. Birkaç ağırlık kullanıyorsanız bunları tek bir değişken dosyada toplamak ön yüklenecek dosya sayısını azaltır; bunu değişken font yazımızda anlattık.
Yedek fontu web fontuna yaklaştırmak
Geçiş anında göze batan şey çoğu zaman harf biçimi değil, boyut farkıdır: yedek font daha geniş ya da daha uzunsa satırlar geçiş sırasında kayar. CSS’in size-adjust tanımlayıcısı bu farkı küçültmeye yarar. MDN’e göre bu tanımlayıcı bir fontun bütün ölçülerini verilen yüzdeyle çarpar ve bir yedek fontun ölçülerini web fontuna yaklaştırmak için kullanılabilir:
@font-face {
font-family: "Yedek Lora";
src: local("Georgia");
size-adjust: 96%;
}
body {
font-family: "Lora", "Yedek Lora", serif;
}Buradaki %96 bir örnek değerdir; doğru oran fonttan fonta değişir ve iki fontu üst üste koyarak denenerek bulunur. Türkçe açısından önemli nokta şu: seçtiğiniz yerel yedek font da ğ, ş ve İ’yi çizmeli. Aksi hâlde geçiş sırasında bu harfler üçüncü bir fonttan gelir.
Geçişi görmek için
Tarayıcı geliştirici araçlarında ağ hızını yavaşlatıp (çoğu tarayıcıda “Slow 3G” gibi bir seçenek bulunur) sayfayı önbelleksiz yenileyin. Ağ sekmesinde iki ayrı woff2 dosyasının ne zaman geldiğini, sayfada da ğ ve ş’nin ne zaman değiştiğini görürsünüz. Kullandığınız fontun iki dosyasının boyutu sitemizdeki font sayfalarında yazıyor; örneğin Inter ve Lora sayfalarını karşılaştırabilirsiniz. Fontun Türkçe harfleri gerçekten çizip çizmediğini de font listesinde kontrol edin; çizmiyorsa ğ ve ş hiçbir zaman web fontuna geçmez.