Yazı karakteri geç geldiğinde sayfadaki metin neden yer değiştirir?

Bir sayfa ilk açıldığında başlık tek satır görünür, birkaç an sonra genişliği değişip iki satıra düşer. Düğme aşağı iner; ziyaretçi tıklamak üzereyken hedefin yeri değişir. Bazen metin önce görünmez, sonra özel yazı karakteriyle belirir. Bu iki deneyim aynı belirti çevresinde oluşsa da inceleme yöntemi farklıdır: biri metnin çizilmesinin beklemesini, diğeri yedek karakterden asıl karaktere geçerken ölçülerin değişmesini içerir. Tasarımın masaüstü ekran görüntüsünde düzgün görünmesi, yavaş bağlantıda aynı davranışın yaşanmadığını kanıtlamaz.

Bu rehber, web sitesinde özel yazı karakteri yüklenirken başlık, paragraf veya kontrolün kaymasını azaltmak isteyen site sahibi ve geliştirici için uygulamalı bir kontrol sırası sunar. Amaç bütün yazı karakteri hareketlerini sıfırlamak ya da bir performans sonucu vaat etmek değildir. Önce hangi yazı dosyasının hangi metinde kullanıldığını, ilk görünümde tarayıcının hangi yedek karakteri çizdiğini ve asıl dosya geldiğinde satır genişliği ile satır yüksekliğinin nasıl değiştiğini bulun. Sonra yükleme tercihini ve yedek ölçülerini karşılaştırmalı test edin. Kısıklı adına özel bir işletme, kullanıcı davranışı veya hizmet sonucu varsayılmaz.

Önce kaymanın kaynağını ayırın

Sayfadaki metnin geç görünmesi ile metnin görünürken yer değiştirmesini ayrı kaydedin. İlk durumda kullanıcı bir süre boş alan veya görünmeyen yazı görebilir. İkinci durumda yedek yazı karakteri baştan görünür; özel dosya geldiğinde harf genişliği, küçük x harfinin yüksekliği, satır aralığı ya da karakter aralığı farklı olduğu için satır sonları değişebilir. Bir başlık satır kırınca altındaki içerik de aşağı iner. Böyle bir örnekte yalnız font dosyasının toplam boyutuna bakmak yeterli değildir; yedek ile asıl karakterin metrikleri de önem taşır.

Kaymayı not ederken yalnızca sayfanın genel puanını değil, hareket eden metin bloğunu ve değişimin anını da kaydedin. Başlığın iki satırdan üç satıra geçmesi, gövde satırlarının yeniden kırılması ve altındaki düğmenin konum değiştirmesi ayrı gözlemlerdir. Bu kayıt, font değişikliğinin hangi içeriği etkilediğini ve düzeltmenin aynı senaryoda işe yarayıp yaramadığını görmeyi sağlar.

Test edeceğiniz sayfa ve metinleri sabitleyin. Uzun başlık, kısa düğme etiketi, fiyat, Türkçe karakter içeren paragraf ve farklı uzunlukta bir bağlantı metni seçin. Aynı görünüm genişliğini, metin boyutunu, ağırlığı ve satır aralığını kaydedin. İçerik değişirse font kaynaklı kayma ile yeni metnin doğal satır kırılmasını ayırmak zorlaşır. Bir değişken seçin: önce yükleme davranışını, sonra yedek font ailesini, ardından gerekiyorsa ölçü eşlemesini test edin. Hepsini aynı anda değiştirmek hangi ayarın etkili olduğunu gizler.

Sayfada gerçekte hangi font dosyasının istendiğini geliştirici araçlarının ağ panelinden izleyin. İstek başarısız mı, gecikiyor mu, gereksiz ağırlık veya karakter kümesi mi indiriliyor? Birden fazla dosya yüz ve ağırlık için ayrı tanımlanabilir; kullanılan yazı ile istenen dosya eşleşmiyorsa tasarım dosyasına bakmak yanıltır. Türkçe karakterler kullanılan dosyada mevcut mu ve seçilen dosya isteği gerçekten sayfada gerekli mi, kontrol edin. Bir dosyayı kaldırmadan önce başlıkların, vurguların ve farklı dil metinlerinin o dosyaya ihtiyaç duyup duymadığını doğrulayın.

Yedek yazı karakterini gerçek metinle seçin

Yedek font, yalnızca genel bir “sans-serif” ifadesi eklenmiş olduğu için uygun sayılmaz. Asıl yazı karakteri yüklenene kadar tarayıcı listedeki yedeklerden birini kullanabilir. Harflerin genişliği, satır yüksekliği ve biçimi belirgin farklıysa değişim daha görünür olabilir. Karşılaştırmayı aynı Türkçe başlık ve paragrafla yapın; kısa İngilizce örnek Türkçe karakter kümesini veya uzun kelime etkisini göstermeyebilir. Başlık, gövde metni ve düğmeler ayrı font ağırlıkları kullanıyorsa her birini ayrı kaydedin.

Yedek listesinde benzer ölçülere sahip bir sistem fontu seçmeyi değerlendirin. Ancak aynı isimdeki sistem fontu her işletim sisteminde birebir aynı dosya veya ölçü anlamına gelmez. Bu nedenle tek bilgisayarda alınan görüntü bütün cihazları kanıtlamaz. Hedeflenen masaüstü ve telefon koşullarını, mümkünse farklı işletim sistemlerini de test planına ekleyin. Amaç, her ekranda piksel piksel aynı görünümü zorlamak değil; içerik yüklenirken kritik metnin ve etkileşim alanlarının beklenmedik biçimde yer değiştirmediğini doğrulamaktır.

Asıl ve yedek font arasındaki ölçü farkını azaltmak için CSS (sayfa görünümünü ve biçimini tanımlayan stil kuralları) yazı karakteri tanımlarındaki metrik ayarlama özellikleri incelenebilir. size-adjust ölçeklemeyi; ascent-override, descent-override ve line-gap-override ise yazı karakterinin dikey metriklerini etkilemek için kullanılır. Bu özellikler her tasarıma aynı sayıları kopyalama reçetesi değildir. Yanlış ölçü yazı boyutunu ve satır yerleşimini bozabilir; dikey ayarlar bazı işaretleri kesebilir veya satır yüksekliğini olumsuz etkileyebilir. İlk olarak gerçek font dosyalarıyla ölçüm yapın; sonra küçük bir örnek sayfada değişikliği karşılaştırın ve okunabilirliği ayrıca kontrol edin.

Yükleme tercihini tasarımın amacıyla eşleştirin

font-display ayarı, web fontu indirilirken metnin nasıl gösterileceğini belirleyen CSS tercihidir. swap gibi bir davranış metni yedek fontla erken gösterebilir; özel font sonradan geldiğinde görünüm değişebilir. optional ise her ilk sayfa açılışında özel fontun kullanılacağı anlamına gelmez; seçimin sonucu tarayıcı koşullarına ve kaynağın zamanında hazır olmasına göre değişebilir. Bu değerlerden hiçbiri tüm siteler için tek doğru değildir. Görünür metin, marka karakteri, bağlantı hızı ve kullanıcı görevi birlikte değerlendirilmelidir.

Resmî web.dev ve Chrome geliştirici belgeleri yazı fontunun yüklenmesi sırasında görünmez metin veya görünür yer değişimi olabileceğini, yedek ölçülerinin farkının etkili olduğunu ve yükleme seçeneklerinin farklı ödünleşimleri bulunduğunu anlatır. Bu belgelerdeki kod örneğini doğrudan üretime taşımak yerine kendi sayfanızda deneyin. Bir başlık fontunu erken yüklemek bazı koşullarda yardımcı olabilir; gereğinden fazla kaynağa öncelik vermek diğer gerekli dosyalarla rekabete girebilir. Yalnız ilk görünümde gerçekten kullanılan kritik dosyaları değerlendirin ve sonucu ölçün.

Font dosyası isteklerini azaltma ya da erken isteme kararını yalnız laboratuvar ekranına göre vermeyin. Önbelleği temizlenmiş ilk ziyarette, daha önce ziyaret edilmiş durumda ve yavaşlatılmış ağ koşulunda ayrı karşılaştırma yapın. Özel font önbellekte bulunduğunda kayma görülmemesi ilk ziyarette de sorun olmayacağını göstermez. Tersine, tek bir yavaş bağlantıda alınan görüntü de bütün ziyaretçilerin aynı sonucu yaşadığını kanıtlamaz. Kayıtlarınızda test ortamı, ağ profili, tarayıcı ve sayfanın sürümünü açıkça yazın.

Karşılaştırmalı kabul testi kurun

Önce değiştirilmemiş sayfanın başlangıç görüntüsünü ve font isteklerini kaydedin. Ardından bir yükleme seçeneğini veya yedek fontu değiştirip aynı başlık ve metni tekrar deneyin. Ekran görüntülerini aynı pencere boyutunda karşılaştırın; ayrıca başlık satırlarının, düğmelerin ve yakındaki içerik bloklarının yerini ölçün. Görünür metnin hiç çizilmediği bir bekleme yaşanıyorsa bunu, metnin çizilip sonra kaymasıyla karıştırmayın. Her ikisi için ayrı gözlem notu tutun.

Tarayıcının performans kaydında beklenmedik yer değişimi işaretleri varsa zamanlarını font dosyası isteğiyle karşılaştırın. Bu, yazı karakterinin kesin neden olduğunu tek başına ispatlamaz; aynı anda görsel, reklam, kişisel ayar paneli veya başka bir içerik yüklenmiş olabilir. Bir kayma oluştuğu anda hangi öğelerin yer değiştirdiğini, fontun o sırada yüklenip yüklenmediğini ve aynı senaryonun tekrarında tekrarlanıp tekrarlanmadığını kontrol edin. Genel hız ve yer değiştirme göstergelerini anlatan web sitesi hızı rehberi daha geniş değerlendirmeyi açıklar; burada odak yalnızca font geçişidir.

Başlığı kısaltıp sorunu gizlemek, font koşulunu düzeltmekle aynı şey değildir. İçerik veya tasarım kararı gerekiyorsa bunu ayrıca kaydedin. Metni kesmek, yazı boyutunu okunmayacak kadar küçültmek ya da içeriğin yüksekliğini sabitlemek ilk görüntüyü sakinleştirse bile başka ekranda taşmaya yol açabilir. Metrik ayarı yapıldıktan sonra Türkçe karakter, kalın/normal ağırlık, bağlantı ve odak görünümü gibi örnekleri tekrar gözden geçirin. Kurumsal tipografi seçimiyle web font yükleme davranışı farklı ama ilişkili kararlardır; tipografi rehberi karakter ve okunurluk kararlarını ayrıca ele alır.

Düzeltme sonrası aynı test matrisini saklayın: sayfa sürümü, tarayıcı, cihaz genişliği, ağ profili, önbellek durumu, seçilen font ve yedek, yükleme tercihi ve gözlenen metin kayması. Böylece sonraki font veya içerik güncellemesinde aynı karşılaştırma tekrarlanabilir. Değişiklik canlıya alınacaksa gerçek sayfada başlık, buton ve form metniyle kısa kabul turu yapın. Yayın öncesi kullanıcı turu rehberi bu kontrolün diğer görevlerle birlikte nasıl planlanabileceğini açıklar. Web Tasarım ve Yazılım hizmeti kapsamında yazı karakteri ve yükleme davranışının kim tarafından test edileceğini de netleştirin.

Sık Sorulan Sorular

Yazı karakteri yüklenirken metin neden aşağı kayar?

Asıl font ile önce kullanılan yedek fontun harf genişliği veya dikey ölçüleri farklı olabilir. Başlık daha fazla satıra bölündüğünde altındaki bölüm aşağı iner. Aynı metni sabitleyip font isteğiyle kayma zamanını karşılaştırın; eşzamanlı görsel veya başka bileşenlerin de hareket edip etmediğini kaydedin.

font-display: swap her zaman doğru tercih midir?

Hayır. Bu tercih metnin özel font beklerken yedekle görünmesine izin verir; özel font geldiğinde ölçü farkı varsa görünür geçiş olabilir. Bazı sayfalarda erken metin görünürlüğü daha önemliyken bazılarında görsel süreklilik öne çıkabilir. Kararı sabit bir reçeteyle değil aynı sayfanın ilk açılış testleriyle verin.

optional kullanırsam özel font her ziyarette görünür mü?

Bu garanti edilmez. Resmî web.dev açıklamasında bu davranış, kaynak zamanında hazır olduğunda özel fontu kullanma; geç kaldığında ilk gezinimde yedek fontta kalabilme şeklinde anlatılır. Bu nedenle markanın özel fontunun mutlaka ilk ekranda görünmesi gerekiyorsa kullanıcı deneyimini ve kaynak yükleme düzenini ayrıca değerlendirin.

Yedek fontu nasıl seçmeliyim?

Gerçek başlık, paragraf, fiyat ve düğme metniyle karşılaştırın. Harf biçimi kadar satır genişliği ve yüksekliği de önemlidir. Tek bir cihazdaki benzer görünüş bütün sistemlerde aynı sonucu garanti etmez. Önemli ekran genişliklerinde ilk yüklemeyi ve önbellekli açılışı test ederek farklılıkları not edin.

size-adjust ve diğer metrik özellikleri kopyalanabilir mi?

Örnek değerleri başka font çiftine doğrudan taşımak güvenilir değildir. Asıl ve yedek dosyanın ölçülerini değerlendirip küçük bir deneme sayfasında görünüşü karşılaştırın. Yazı boyutu, satır aralığı ve okunabilirlik bozulursa ayarı geri alın. Teknik özellik desteğini hedef tarayıcı ortamında ayrıca doğrulayın.

Bir font dosyasını önceden yüklemek kaymayı çözer mi?

Her durumda değil. Erken istek özel fontun ilk çizime yetişme ihtimalini artırabilir; dosyanın hâlâ geç gelmesi, yedek metriklerinin farklı olması veya gereksiz öncelik verilmesi sorun bırakabilir. Yalnız kritik dosyaları belirleyin ve ağ profilleriyle önce-sonra denemesi yapın; sayısal iyileşme garantisi vermeyin.

Türkçe metinleri ayrıca test etmek neden önemlidir?

Bir font dosyası gereken karakterleri veya ağırlığı içermeyebilir; tarayıcı bazı harfleri başka fontla çizebilir. Bu karışım ölçüyü ve görünümü etkileyebilir. Büyük ve küçük Türkçe karakterler, noktalama, kalın başlık ve bağlantılı metin içeren örneklerle gerçek sayfayı kontrol edin.

Kayma gördüğümde Core Web Vitals raporu tek başına yeterli mi?

Hayır. Genel ölçüm bir sorunun hangi koşulda görüldüğünü gösterebilir; tek başına fontun neden olduğunu ispatlamaz. Font isteği, kaymanın zamanı, etkilenen öğe ve tekrar edilebilir test birlikte incelenmelidir. Görsel veya başka içerik de aynı anda yer değiştiriyorsa olası nedenleri ayrı ayrı sınayın.