İndirilen bir yazı tipi kullanılmadan kalabilir; çünkü CSS başka bir yüz seçer, metindeki karakterler yazı tipinin kapsamı dışındadır ya da görüntüleme süresi dolmuştur. Mac’te, önce bir etiketi gerçekte hangi yazı tipinin görüntülediğini inceleyin, ardından seçim ve yükleme adımlarını geriye doğru izleyin.

Bu kılavuz, başarılı bir yazı tipi isteği görmesine rağmen yedek yazı tipindeki metni görmeye devam eden bir web sayfası geliştiricisine yöneliktir. İnceleme adımları için macOS’ta Chrome kullanın. Aşağıdaki örnek Panel 204 etiketi ve Sample Sans aile adı teşhisi açıklamak içindir; belirli bir web sitesini tanımlamaz.

Başarılı bir indirme gerçekte neyi kanıtlar?

Teşhisi dört ayrı soru olarak ele alın: Kaynak alındı mı? Kullanılabilir bir yüz kaydedildi mi? CSS bu karakterler için o yüzü seçti mi? Görüntüleyici onu çizdi mi? Bir yazı tipi ön yüklemesi, erken bir getirme işlemi başlatır; bu işlemin varlığı, görünür metni hangi yazı tipinin sağladığını göstermez. MDN: rel="preload"

Yazı tipi eşleştirme, yalnızca indirilen dosyalara değil metne göre çalışır. Tarayıcı, istenen aileleri ve yazı tipi özelliklerini değerlendirir, ardından karakter desteğini kontrol eder. Bu nedenle bir etiket birden fazla yazı tipi kullanabilir; sayfanın başka bir bölümündeki içerik de hedef etiketiniz hakkında pek az şey söyleyen bir yazı tipi indirmesini tetikleyebilir. W3C: CSS Fonts Module Level 4, font matching

Sonraki kontrolü seçmek için bu karar tablosunu kullanın. Tablo, belgelenmiş yükleme ve eşleştirme sınırlarından türetilmiş bir teşhis aracıdır; ölçülmüş tarayıcı sonuçlarının kaydı değildir.

Gözlem Sonraki kontrol Ayırt etmeye yardımcı olduğu durum
Hesaplanan aile, amaçlanan aileden farklı Kazanan CSS bildirimini izleyin Basamaklandırma veya hedefleme sorunu
Hesaplanan aile doğru, görüntülenen yazı tipi farklı Yüz tanımlayıcılarını ve karakter kapsamını inceleyin Seçim veya yedek yazı tipine geçiş sorunu
JavaScript yüklü bir yüz bildiriyor, ancak bu yüz belgenin yazı tipi kümesinde yok Kayıt kodunu inceleyin Kayıt yapılmadan yükleme
Yazı tipi yeniden yüklemeden sonra görünüyor, ancak ilk ziyarette görünmüyor font-display değerini ve yükleme zamanlamasını inceleyin Görüntüleme aralığının etkisi
Normal metin düzgün, canvas metni değişmiyor Çizim sırasını ve canvas yazı tipi ayarlarını inceleyin Ayrı çizim işlemi

Hedef etiketi gerçekte hangi yazı tipiyle çiziliyor?

Etkilenen sayfada Command + Shift + C tuşlarına basıp metni seçin. Elements bölümünde, etkilenen etiketi içeren en küçük öğeyi seçin. Computed bölümünü açın ve Rendered Fonts kısmına kaydırın. Chrome, görüntülenen metni sağlayan yazı tiplerini incelemek için bu görünümü belgeliyor. Chrome DevTools: CSS features reference, Chrome DevTools: Apply other effects

Görüntülenen yüzü ve kaynağının yerel mi yoksa ağ kaynağı mı olduğunu kaydedin. Ayrıca hesaplanan font-family, font-weight ve font-style değerlerini de kaydedin. Hesaplanan aile, istenen yığını gösterir; görüntülenen yazı tipi sonucu ise glifleri gerçekte neyin sağladığını belirtir. İki yüz birbirine benzeyebileceğinden, yalnızca tanıdık görünmesi zayıf bir kanıttır. Chrome DevTools: What font is that?

Etkilenen metin için amaçlanan yüz görünüyorsa, ağırlık veya özellikler gibi görünüm farkının kendisini araştırın. Görünmüyorsa aşağıdaki adımlarla devam edin. Her gözlemin karşılaştırılabilir olması için test sırasında özgün metni ve görüntü alanını değiştirmeyin.

Etkin CSS, amaçlanan yüzü mü istiyor?

Computed bölümünde etkin yazı tipi özelliklerini inceleyin, ardından bildirimlerini bulmak için Styles bölümünü kullanın. Chrome bu görünümleri birbirinden ayırır: Styles geçersiz kılınmış bildirimleri içerirken Computed gerçekten uygulanan değerleri gösterir. Bir kartta birden fazla etiket varsa metni içeren alt öğeyi inceleyin; üst öğenin yazı tipi bildirimi, alt öğe için yeterli kanıt değildir. Chrome DevTools: CSS features reference

Kazanan font kısa yazımını ve tek tek özellikleri kontrol edin. Örneğin font: 16px sans-serif, genel bir aile seçer ve ağırlık ile stil dahil olmak üzere kısa yazımda belirtilmeyen bileşenleri sıfırlar. Ayrıca font-feature-settings ve font-variation-settings gibi özellikleri de sıfırlar. Beklenmedik değere neden olan bildirimi düzeltin, ardından yeniden inceleyin. MDN: font

Ardından, istenen aileyi ilgili @font-face kuralındaki font-family tanımlayıcısıyla karşılaştırın. Bu tanımlayıcı, yüze başvurmak için kullanılan CSS aile adını belirler; öğenin yazı tipi yığınına dosya adını yazmanız gerekmez. src, ağırlık, stil ve varsa tanımlı aralıklar dahil, tarayıcıya iletilen kuralı kontrol edin. MDN: @font-face

Değişken bir yazı tipinin desteklenen ağırlık aralığı iki değerle ifade edilebilirken statik bir yüz tek bir ağırlık belirtebilir. Tanımlayıcıları sağlanan kaynağı doğru yansıtacak şekilde düzenleyin. Bir uyumsuzluk araştırılmalıdır ancak yedek yazı tipine geçişi kendiliğinden açıklamaz: tam bir stil bulunmadığında yazı tipi eşleştirme alternatifleri de içerir. MDN: @font-face, W3C: Matching font styles

Yerel bir yazı tipi öncelik alıyor olabilir mi?

src içinde bir local() alternatifi olup olmadığını inceleyin. Bu yazı tipi Mac’e yüklenmişse tarayıcı, önceden yüklenmiş ayrı web yazı tipi kullanılmadan kalırken yerel kopyayı kullanabilir. Chrome’da bu durumu yalıtmak için Rendering panelini açın, Disable local fonts seçeneğini etkinleştirin ve sayfayı yeniden yükleyin. Önceki ve sonraki Rendered Fonts sonuçlarını karşılaştırın, ardından ayarı geri alın. Bu test, @font-face kurallarındaki local() kaynaklarını hedefler. Chrome DevTools: Apply other effects

Yüz doğru belgeye yüklendi ve kaydedildi mi?

new FontFace() ile oluşturulan bir yüz, yazı tipi kümesine eklenmeden yüklenmesini tamamlayabilir. Belge içinde görüntülenebilmesi için document.fonts öğesine eklenmesi gerekir. Uygulamanın yükleme akışında her iki işlemi de inceleyin; yüzün yükleme vaadinin çözümlenmesi tek başına kayıt işlemini tamamlamaz. MDN: CSS Font Loading API

Aşağıdaki eksiksiz konsol tanılaması, mevcut belgede kayıtlı yüzleri listeler. Bunu etkilenen sayfanın konsol bağlamında çalıştırın. Kümedeki yüklemeleri başlatmadan veya stilleri değiştirmeden okur; hangi gliflerin görüntülendiğini belirlemez. Tarayıcıya bağlı davranışı burada çalıştırılmamıştır.

(() => {
  const faces = Array.from(document.fonts, face => ({
    family: face.family,
    weight: face.weight,
    style: face.style,
    stretch: face.stretch,
    unicodeRange: face.unicodeRange,
    status: face.status
  }));

  console.table(faces);
  console.log("Registered face count:", faces.length);
})();

Bu envanteri kullanarak eksik bir kaydı, kayıtlı olmasına rağmen kullanılmayan bir yüzden ayırın. Durumu error olan bir girdi için tipografiyi değiştirmeden önce yükleme hatasını araştırın. loaded girdisi yükleme durumunu gösterir; yüzün seçilip seçilmemesi yine öğeye ve metne bağlıdır. MDN: CSS Font Loading API

document.fonts.check() değerini görüntülenme kanıtı olarak değerlendirmeyin. Var olmayan bir aile için bile true sonucunu döndürebilir. İsteğe bağlı metin bağımsız değişkeni eşleştirmeyi bildirilmiş Unicode aralıklarına göre daraltır; tek tek glif kapsamını sınamaz. Benzer şekilde, document.fonts.ready kullanılan yazı tiplerinin yüklenmesi ve sayfa düzeninin tamamlanmasının ardından çözümlenir; tanımlanmış her yüzün görüntülendiğini doğrulamaz. MDN: FontFaceSet.check(), MDN: Document.fonts

Yazı tipi, test ettiğiniz karakterleri kapsıyor mu?

Hem CSS unicode-range değerini hem de yazı tipi kaynağının kendisini kontrol edin. Tanımlayıcı, hangi karakterlerin bir yüzü kullanabileceğini belirler. Tanımlayıcıyı genişletmek, dosyada bulunmayan glifleri oluşturamaz: yazı tipinin karakter eşlemesi, eşleştirmenin bir parçasıdır. MDN: unicode-range, W3C: Matching font styles

Yalnızca U+0030-0039 aralığıyla sınırlı açıklayıcı bir kuralı ele alalım. Panel 204 içinde yalnızca 2, 0 ve 4 bu aralığa girer. Harfler ve boşluk girmez. Rakamların indirmeyi tetiklemesi, yazı tipinin etiketin tamamını görüntüleyebildiğini kanıtlamaz. MDN, kapsam dahilindeki bir karakterle karşılaşmanın yazı tipi kaynağının tamamını indirebileceğini belgeliyor. MDN: unicode-range

Bu bağımsız JavaScript örneği, söz konusu farkı gösterir. Herhangi bir kurulum gerektirmeden tarayıcı konsolunda veya Node.js’te çalışır. Örnekte gösterilen aralık hesabı belirleyici sonuç verecek şekilde çalıştırılmıştır.

const text = "Panel 204";
const rows = Array.from(text, character => {
  const value = character.codePointAt(0);
  return {
    character,
    codePoint: "U+" + value.toString(16).toUpperCase().padStart(4, "0"),
    inDeclaredRange: value >= 0x30 && value <= 0x39
  };
});

console.table(rows);

Aralık gerekli karakterleri dışarıda bırakıyorsa, hatalı tanımlayıcıyı düzeltin veya bu karakterleri içeren bir alt küme sağlayın. Sonucu kontrol ederken ilk başarısız olan metni koruyun. Bir dize üzerinde döngü kurmanın şekillendirme testi olduğunu varsaymayın: birleştirici diziler küme işlemeyi gerektirir ve standart, gerekli olduğunda şekillendirme bilgilerini dikkate alır. Görüntülenen çıktıyı karşılaştırırken dizileri bölmeden koruyun. W3C: Font matching and cluster matching

Yazı tipi kendi görüntüleme süresini kaçırdı mı?

Aile ve kapsam doğru görünüyorsa font-display değerini inceleyin. optional çok kısa bir bloklama süresine ve hiçbir değiştirme süresine sahip değildir. fallback kısa bir değiştirme süresine sahiptir. Bu nedenle kaynak, geçerli süre dolduktan sonra gelirse o sayfa yüklemesinde yedek metin görünür kalabilir. swap, ilk bloklama süresinin ardından sınırsız bir değiştirme süresine izin verir. MDN: font-display

Kontrollü bir teşhis için, sunulan stil sayfasında etkilenen kuralı geçici olarak font-display: swap olarak değiştirin ve ilk yükleme koşullarını tekrarlayın. Yüz şimdi yüklendikten sonra görünüyorsa zamanlama olası bir açıklamadır. Ayarı kalıcı olarak tutmadan önce bu geç görsel değişimin sayfaya uygun olup olmadığına karar verin. Hem ilk yüklemeyi hem de önbellekten yeniden yüklemeyi tekrarlayın; yalnızca önbelleğe alınmış sonuç, kaynağın ilk geliş zamanlamasını yeniden oluşturmaz.

Bir kitaplık veya canvas metni çizdiğinde ne değişir?

Sayfa zaten Font Face Observer kullanıyorsa gözlemlenen aileyi ve weight, style ve stretch seçeneklerini inceleyin. Belgeleri, aracı bir yükleyici ve izleyici olarak tanımlar; olağan @font-face kurallarını ve yazı tipinde varsayılan test karakterleri yoksa özel bir test dizesi gerektirir. Varsayılan zaman aşımı üç saniyedir. Gözlemcinin zaman aşımı ile tarayıcının font-display aralığı ayrı koşullardır. Font Face Observer documentation

Teşhis açısından, gözlemcinin başarı mesajından sonra hedef öğe incelenmelidir. Bir yüzün kullanılabilirliğini izlemek, öğenin kazanan CSS bildiriminde o yüzü istediğini göstermez. Yanıtlanmamış soru, hangi yüzün görüntülendiği ise başka bir yükleyici kurmak pek işe yaramaz.

Canvas, ayrı bir çizim sınırı oluşturur. Çizim bağlamının başlangıçta 10px sans-serif olan kendi font ayarı vardır; geçersiz bir atama yok sayılır. Bu nedenle canvas öğesinde bir CSS ailesi ayarlamak, bağlamın yazı tipini belirlemek için yeterli değildir. Çizim bağlamına atanan değeri ve yükleme ile çizim işlemlerinin sırasını inceleyin. WHATWG: Canvas text styles

Canvas metni için amaçlanan kayıtlı yüzün yüklenmesini bekleyin, bağlamın yazı tipini ayarlayın, ardından uygulamanın normal çizim yordamını kullanarak etkilenen sahneyi yeniden çizin. Yazı tipi geldiğinde daha önce boyanmış pikseller yeni yazı tipini kendiliğinden almaz. Canvas metni hazırlama işlemi ayrıca varsayımsal olarak sonsuz genişlikte bir satır kutusu kullanır; bu nedenle başarılı bir canvas testi, sınırlandırılmış bir web sayfası etiketinin aynı şekilde satır kıracağını göstermez. WHATWG: Text preparation and drawing text

Onarımı nasıl doğrularsınız?

Sorunu ortaya çıkaran gözlemi tekrarlayarak özgün etikete dönün. Özgün yükleme koşullarında hesaplanan isteği, görüntülenen yüzü ve ilgili karakterleri doğrulayın. Canvas kullanıyorsanız karşılaştırmadan önce yeniden çizin. Teşhisin tekrarlanabilmesi için öğeyi, istenen özellikleri, gerçekte görüntülenen yüzü, kaynağı ve başarılı değişikliği kısa bir kayda geçirin.

Yazı tipinin neden kullanılmadığını açıklayabildiğinizde ve etkilenen metinde amaçlanan sonucu gösterebildiğinizde teşhisi tamamlayın. Düzeltilmiş bir aile bildirimi, doğru bir alt küme, kayıtlı bir yüz, uygun bir görüntüleme politikası veya doğru zamanlanmış bir yeniden çizim farklı sınırları ele alır. Gözlemlerinizin desteklediği onarımı seçin.

Kaynaklar