Font yang diunduh bisa tetap tidak digunakan karena CSS memilih face lain, teks berada di luar cakupan karakternya, atau jendela tampilnya sudah lewat. Di Mac, mulailah dengan memeriksa font yang benar-benar merender satu label, lalu telusuri kembali proses pemilihan dan pemuatannya.

Panduan ini ditujukan bagi orang yang memelihara halaman web, melihat permintaan font berhasil, tetapi tetap melihat teks fallback. Gunakan Chrome di macOS untuk langkah pemeriksaan. Label sintetis Panel 204 dan nama keluarga Sample Sans di bawah ini menggambarkan diagnosis; keduanya tidak merujuk pada situs web tertentu.

Apa yang sebenarnya dibuktikan oleh unduhan yang berhasil?

Anggap diagnosis ini terdiri atas empat pertanyaan terpisah: Apakah sumber daya berhasil diambil? Apakah face yang dapat digunakan telah didaftarkan? Apakah CSS memilih face tersebut untuk karakter-karakter ini? Apakah renderer menggambarnya? Preload font memulai pengambilan lebih awal; keberadaannya tidak membuktikan font mana yang menyediakan teks yang terlihat. MDN: rel="preload"

Pencocokan font bekerja berdasarkan teks, bukan sekadar berkas yang diunduh. Browser mempertimbangkan keluarga dan properti font yang diminta, lalu memeriksa dukungan karakter. Karena itu, satu label dapat menggunakan beberapa font, dan bagian lain halaman dapat memicu unduhan font yang tidak banyak memberi tahu Anda tentang label yang sedang diperiksa. W3C: CSS Fonts Module Level 4, pencocokan font

Gunakan tabel keputusan ini untuk memilih pemeriksaan berikutnya. Tabel ini merupakan alat bantu diagnosis yang disusun berdasarkan batas pemuatan dan pencocokan yang terdokumentasi, bukan catatan hasil browser yang diukur.

Pengamatan Pemeriksaan berikutnya Hal yang dibantu untuk dibedakan
Keluarga terkomputasi berbeda dari keluarga yang dimaksud Telusuri deklarasi CSS yang menang Masalah kaskade atau penargetan
Keluarga terkomputasi benar, font yang dirender berbeda Periksa deskriptor face dan cakupan karakter Masalah pemilihan atau fallback
JavaScript melaporkan face telah dimuat, tetapi face tidak ada di set font dokumen Periksa kode pendaftaran Pemuatan tanpa pendaftaran
Font muncul setelah pemuatan ulang, tetapi tidak pada kunjungan pertama Periksa font-display dan waktu pemuatan Perilaku jendela tampil
Teks biasa berfungsi, teks canvas tidak berubah Periksa urutan penggambaran dan pengaturan font canvas Operasi penggambaran terpisah

Font mana yang benar-benar menggambar label sasaran?

Di halaman yang terdampak, tekan Command + Shift + C, lalu pilih teksnya. Di Elements, pilih elemen terkecil yang memuat label tersebut. Buka Computed, lalu gulir ke Rendered Fonts. Chrome mendokumentasikan tampilan ini sebagai tempat untuk memeriksa font yang menyediakan teks yang dirender. Chrome DevTools: Referensi fitur CSS, Chrome DevTools: Terapkan efek lain

Catat face yang dirender dan apakah sumbernya lokal atau sumber daya jaringan. Catat juga font-family, font-weight, dan font-style yang terkomputasi. Keluarga terkomputasi adalah tumpukan font yang diminta; hasil font yang dirender menunjukkan font yang menyediakan glif. Kemiripan tampilan saja merupakan bukti yang lemah karena dua face dapat terlihat serupa. Chrome DevTools: Font apa itu?

Jika face yang dimaksud muncul pada teks yang terdampak, lanjutkan penyelidikan pada perbedaan tampilan tertentu, seperti bobot atau fitur. Jika tidak muncul, lanjutkan ke bagian berikut. Pertahankan teks dan viewport asli selama pengujian agar setiap pengamatan tetap dapat dibandingkan.

Apakah CSS efektif meminta face yang dimaksud?

Di Computed, periksa properti font yang efektif, lalu gunakan Styles untuk menemukan deklarasinya. Chrome membedakan kedua tampilan ini: Styles mencakup deklarasi yang ditimpa, sedangkan Computed menampilkan nilai yang benar-benar diterapkan. Periksa elemen anak yang memuat teks jika sebuah kartu berisi beberapa label; deklarasi font pada elemen induk bukan bukti yang cukup untuk elemen anak. Chrome DevTools: Referensi fitur CSS

Periksa singkatan font yang menang serta properti satuan. Misalnya, font: 16px sans-serif memilih keluarga generik dan mereset komponen singkatan yang tidak dicantumkan, termasuk bobot dan gaya. Properti seperti font-feature-settings dan font-variation-settings juga direset. Perbaiki deklarasi yang menyebabkan nilai tak terduga, lalu periksa kembali. MDN: font

Selanjutnya, bandingkan keluarga yang diminta dengan deskriptor font-family pada aturan @font-face yang relevan. Deskriptor itu menentukan nama keluarga CSS yang digunakan untuk merujuk face; nama berkas bukan nama yang harus Anda cantumkan dalam tumpukan font elemen. Periksa aturan yang dikirim ke browser, termasuk src, bobot, gaya, dan rentang yang dideklarasikan. MDN: @font-face

Rentang bobot yang didukung font variabel dapat dinyatakan dengan dua nilai, sedangkan face statis dapat mendeklarasikan satu bobot. Pastikan deskriptor tersebut secara akurat menggambarkan sumber daya yang disediakan. Ketidakcocokan patut diselidiki, tetapi tidak otomatis menjelaskan fallback: pencocokan font mencakup alternatif saat gaya yang persis tidak tersedia. MDN: @font-face, W3C: Mencocokkan gaya font

Mungkinkah font lokal mendapat prioritas?

Periksa src untuk alternatif local(). Pada Mac yang memiliki font tersebut, browser mungkin menggunakan salinan lokal sementara webfont yang dipreload secara terpisah tetap tidak digunakan. Untuk mengisolasi kondisi ini di Chrome, buka panel Rendering, aktifkan Disable local fonts, lalu muat ulang. Bandingkan Rendered Fonts sebelum dan sesudahnya, lalu pulihkan pengaturannya. Pengujian ini menargetkan sumber local() dalam aturan @font-face. Chrome DevTools: Terapkan efek lain

Apakah face dimuat dan didaftarkan di dokumen yang benar?

Face yang dibuat dengan new FontFace() dapat selesai dimuat sebelum ditambahkan ke set font. Untuk perenderan dokumen, face harus ditambahkan ke document.fonts. Periksa jalur pemuatan aplikasi untuk memastikan kedua operasi dilakukan; penyelesaian promise pemuatan face saja tidak menyelesaikan pendaftaran. MDN: CSS Font Loading API

Diagnosis konsol lengkap berikut mencantumkan face yang terdaftar di dokumen saat ini. Jalankan di konteks konsol halaman yang terdampak. Kode ini membaca set tanpa memulai pemuatan atau mengubah gaya; kode ini tidak mengidentifikasi glif yang dirender. Perilakunya yang bergantung pada browser belum dijalankan di sini.

(() => {
  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);
})();

Gunakan inventaris ini untuk membedakan pendaftaran yang belum dilakukan dari face terdaftar yang tetap tidak digunakan. Untuk entri dengan status error, selidiki kegagalan pemuatan sebelum menyesuaikan tipografi. Entri loaded menunjukkan status pemuatan, sedangkan pemilihan face tetap bergantung pada elemen dan teks. MDN: CSS Font Loading API

Jangan anggap document.fonts.check() sebagai bukti bahwa font dirender. Fungsi ini dapat mengembalikan true bahkan untuk keluarga yang tidak ada. Argumen teks opsionalnya mempersempit pencocokan berdasarkan rentang Unicode yang dideklarasikan dan tidak menguji cakupan glif satu per satu. Demikian pula, document.fonts.ready selesai setelah pemuatan dan tata letak untuk font yang digunakan; ini tidak memastikan bahwa setiap face yang dideklarasikan telah dirender. MDN: FontFaceSet.check(), MDN: Document.fonts

Apakah font mencakup karakter yang sedang Anda uji?

Periksa unicode-range CSS dan sumber daya font yang sebenarnya. Deskriptor ini mengendalikan karakter mana yang boleh menggunakan suatu face. Memperluas deskriptor tidak dapat menciptakan glif yang tidak ada dalam berkas: peta karakter font tetap menjadi bagian dari pencocokan. MDN: unicode-range, W3C: Mencocokkan gaya font

Pertimbangkan aturan ilustratif yang dibatasi pada U+0030-0039. Dalam Panel 204, hanya 2, 0, dan 4 yang termasuk dalam rentang tersebut. Huruf dan spasi tidak termasuk. Karena itu, unduhan yang dipicu oleh digit tidak membuktikan bahwa font dapat merender seluruh label. MDN mendokumentasikan bahwa ditemukannya karakter yang memenuhi syarat dapat memicu pengunduhan seluruh sumber daya font. MDN: unicode-range

Contoh JavaScript mandiri ini menunjukkan perbedaan tersebut. Kode ini berjalan di konsol browser atau Node.js tanpa persiapan. Perhitungan rentang deterministik telah dijalankan untuk contoh yang ditampilkan.

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);

Jika rentang tidak mencakup karakter yang dibutuhkan, perbaiki deskriptor yang tidak akurat atau sediakan subset yang mencakup karakter tersebut. Pertahankan teks asli yang bermasalah saat memeriksa hasilnya. Jangan berasumsi bahwa iterasi string menguji pembentukan teks: rangkaian karakter penggabung memerlukan penanganan klaster, dan standar mempertimbangkan informasi pembentukan teks jika diperlukan. Pertahankan rangkaian karakter tetap utuh saat membandingkan hasil render. W3C: Pencocokan font dan pencocokan klaster

Apakah font melewatkan jendela tampilnya?

Periksa font-display jika keluarga dan cakupan karakter sudah benar. optional memiliki periode blok yang sangat singkat dan tidak memiliki periode tukar. fallback memiliki periode tukar singkat. Karena itu, sumber daya yang tiba setelah jendela yang berlaku dapat membuat teks fallback tetap terlihat selama pemuatan halaman tersebut. swap mengizinkan periode tukar tanpa batas setelah periode blok awalnya. MDN: font-display

Untuk diagnosis terkontrol, ubah sementara aturan yang terdampak menjadi font-display: swap pada stylesheet yang disajikan, lalu ulangi kondisi pemuatan awal. Jika face kini muncul setelah dimuat, waktu pemuatan menjadi penjelasan yang didukung. Tentukan apakah perubahan visual belakangan itu cocok untuk halaman sebelum mempertahankan pengaturan tersebut. Ulangi pemuatan awal dan pemuatan ulang dengan cache; hasil dari cache saja tidak mereproduksi waktu kedatangan semula.

Apa yang berubah jika teks digambar oleh pustaka atau canvas?

Jika halaman sudah menggunakan Font Face Observer, periksa keluarga yang diamati serta opsi weight, style, dan stretch. Dokumentasinya menjelaskan pemuat dan pemantau, mewajibkan aturan @font-face yang lazim, serta mengharuskan string pengujian khusus jika font tidak memiliki karakter pengujian bawaannya. Batas waktu default-nya tiga detik. Batas waktu observer dan jendela font-display browser merupakan kondisi yang terpisah. Dokumentasi Font Face Observer

Sebagai kesimpulan diagnostik, pesan sukses dari observer sebaiknya diikuti dengan pemeriksaan elemen sasaran. Memantau ketersediaan satu face tidak membuktikan bahwa CSS pemenang pada elemen meminta face tersebut. Memasang pemuat lain tidak banyak membantu jika pertanyaan yang belum terjawab adalah face mana yang dirender.

Canvas memiliki batas penggambaran yang terpisah. Konteks penggambarannya memiliki pengaturan font sendiri, dengan nilai awal 10px sans-serif; penetapan yang tidak valid akan diabaikan. Karena itu, menetapkan keluarga CSS pada elemen canvas tidak cukup untuk memastikan font konteksnya. Periksa nilai yang ditetapkan pada konteks penggambaran dan urutan operasi pemuatan serta penggambaran. WHATWG: Gaya teks canvas

Untuk teks canvas, tunggu hingga face yang dimaksud terdaftar dan dimuat, tetapkan font konteks, lalu gambar ulang adegan yang terdampak menggunakan rutinitas penggambaran normal aplikasi. Piksel yang sudah digambar tidak akan memperoleh jenis huruf baru saat font tiba. Persiapan teks canvas juga menggunakan kotak baris hipotetis dengan lebar tak terbatas, sehingga pengujian canvas yang berhasil tidak membuktikan bahwa label halaman web yang dibatasi akan membungkus teks dengan cara yang sama. WHATWG: Persiapan teks dan penggambaran teks

Bagaimana cara memastikan perbaikannya?

Kembali ke label asli dan ulangi pengamatan yang menunjukkan masalahnya. Pastikan permintaan terkomputasi, face yang dirender, dan karakter yang relevan dalam kondisi pemuatan asli. Untuk canvas, gambar ulang sebelum membandingkan. Simpan catatan singkat tentang elemen, properti yang diminta, face yang benar-benar dirender, sumber daya, dan perubahan yang berhasil; catatan ini membuat diagnosis dapat direproduksi.

Selesaikan saat Anda dapat menjelaskan mengapa font tidak digunakan dan menunjukkan hasil yang dimaksud pada teks yang terdampak. Deklarasi keluarga yang diperbaiki, subset yang akurat, face yang terdaftar, kebijakan tampil yang sesuai, atau penggambaran ulang dengan waktu yang tepat masing-masing menangani batas yang berbeda. Pilih perbaikan yang didukung oleh pengamatan Anda.

Sumber