Untuk memeriksa font Blogger, pilih teks yang bermasalah, lihat font yang benar-benar dirender, lalu telusuri berkas dan aturan CSS yang menyediakannya. Sesudah itu barulah tentukan apakah perilaku font-display perlu diuji. Mengganti nilainya tanpa mengetahui font terpakai dapat menyasar aturan yang tidak berpengaruh.
Panduan ini membahas pemuatan huruf, bukan pemilihan pasangan warna atau ukuran teks. Bila kebutuhan Anda menyusun tampilan baca, gunakan panduan warna dan tipografi Blogger. Langkah berikut merupakan prosedur pemeriksaan, bukan laporan bahwa font situs Anda sudah bermasalah.
Mulai dari teks yang benar-benar sedang dibaca
Tentukan satu contoh: judul artikel atau paragraf pertama. Catat URL, perangkat, browser, serta gejalanya, misalnya teks sempat kosong atau bentuk huruf berubah setelah halaman terbuka. Hindari menggabungkan beberapa keluhan menjadi kesimpulan “semua font lambat”.
Klik kanan teks tersebut di Chrome lalu pilih Inspect. Pada Elements → Computed, cari bagian Rendered Fonts. Dokumentasi Rendering Chrome DevTools menunjukkan pemeriksaan bagian ini untuk mengetahui font yang ditemukan browser, termasuk sumber lokalnya.
Bandingkan hasil itu dengan deklarasi font-family pada elemen. Menurut dokumentasi font-family MDN, daftar keluarga font adalah urutan pilihan; pemilihan juga dilakukan untuk karakter yang perlu ditampilkan. Nama pertama dalam CSS belum membuktikan bahwa seluruh teks digambar dengan font tersebut.
Karena itu, dua font pada hasil inspeksi belum cukup membuktikan pemuatan ganda yang sia-sia. Sebagian karakter mungkin memakai pengganti. Ulangi pemeriksaan pada potongan teks sederhana dan pada bagian yang memuat simbol, lalu catat perbedaannya tanpa langsung menghapus berkas apa pun.
Hubungkan font terpakai dengan permintaan berkas
Buka Network sebelum memuat ulang halaman. Aktifkan filter Font, lalu periksa permintaan yang tercatat. Baca alamat lengkap, status, serta sumber pemicunya melalui kolom Initiator. Untuk urutan hubungan antarsumber, tahan Shift sambil menunjuk permintaan. Cara ini dijelaskan dalam referensi Network Chrome DevTools.
Untuk percobaan kunjungan tanpa cache browser, centang Disable cache selama DevTools terbuka dan muat ulang. Pisahkan catatannya dari kunjungan ulang dengan cache aktif. Permintaan yang tidak tercatat sebelum panel dibuka tidak termasuk dalam pengamatan tersebut.
Susun catatan ringkas per elemen: font terender, keluarga yang diminta CSS, bobot, gaya, URL berkas, sumber aturan, dan status permintaan. Contoh catatan hipotetis: “paragraf memakai font lokal; CSS meminta keluarga khusus; berkas keluarga khusus gagal”. Itu petunjuk untuk memeriksa kegagalan, bukan bukti bahwa font lokal harus diganti.
Jangan menilai duplikasi hanya dari nama keluarga. Berkas berbeda dapat melayani bobot atau karakter berbeda. Minta pengembang mencocokkan tujuan tiap aturan sebelum menggabungkan pemuatan. Jika hubungan berkas dengan elemen belum jelas, tandai belum terkonfirmasi dan simpan bukti yang tersedia.
Pilih perilaku tampilan sesuai tujuan elemen
MDN menjelaskan font-display sebagai descriptor di dalam @font-face, bukan properti yang ditempelkan pada paragraf. Nilainya mengatur tahapan tampilan ketika font belum siap. Tiga pilihan berikut dapat dibandingkan tanpa menganggap salah satunya selalu terbaik:
swap: masa pemblokiran sangat singkat, kemudian font pengganti ditampilkan dan masih dapat ditukar ketika font tujuan siap.fallback: masa pemblokiran sangat singkat, dengan kesempatan pertukaran yang terbatas.optional: masa pemblokiran sangat singkat tanpa masa pertukaran berikutnya; font tujuan yang terlambat dapat tidak digunakan pada tampilan itu.
Untuk paragraf panjang, tanyakan apakah keterbacaan segera dengan font pengganti lebih penting daripada selalu memakai keluarga khusus. Untuk judul beridentitas kuat, pertimbangkan konsekuensi tampilan awal dan pergantian kemudian. Ini keputusan desain yang harus diperiksa pada isi nyata, bukan aturan SEO.
Panduan font web.dev menjelaskan bahwa perbedaan ukuran ruang antara font pengganti dan font tujuan dapat menggeser tata letak ketika terjadi pertukaran. Font ikon juga membutuhkan pertimbangan berbeda karena karakter penggantinya dapat menyampaikan makna lain. Jangan menerapkan satu strategi ke seluruh font tema, termasuk ikon.
Baca contoh CSS sebagai bahan uji terpisah
Contoh berikut hanya ditampilkan sebagai teks. Untuk latihan, tempatkan CSS pada stylesheet halaman percobaan yang Anda kendalikan, lalu berikan kelas contoh-font-artikel pada paragraf uji. Ini bukan kode untuk ditempelkan ke isi postingan Blogger atau ditambahkan lagi ke tema yang sudah memuat font serupa.
@font-face {
font-family: "FontLatihanArtikel";
src: url("https://example.com/fonts/font-latihan-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
.contoh-font-artikel {
font-family: "FontLatihanArtikel", Arial, sans-serif;
font-weight: 400;
font-style: normal;
}Referensi @font-face MDN menjelaskan hubungan nama keluarga, sumber, bobot, dan gaya. Ganti URL contoh dengan berkas yang memang Anda berhak gunakan dan layani. Cocokkan nama keluarga pada kedua aturan; bobot 400 dan gaya normal harus sesuai berkas latihan, bukan sekadar mengganti namanya.
Jika font berada pada asal berbeda, server penyedianya harus mengizinkan pemuatan lintas asal yang sesuai. Mengubah CSS saja tidak memperbaiki izin server. Jangan memakai URL contoh sebagai berkas nyata atau mengira ekstensi WOFF2 membuktikan responsnya valid.
Uji satu perubahan dan simpan alasan keputusan
Pada halaman percobaan, bandingkan satu nilai font-display dengan nilai sebelumnya menggunakan teks dan kondisi yang dicatat sama. Periksa apakah teks terbaca sejak awal, apakah pergantian huruf mengubah baris, serta apakah simbol, tebal, dan miring tetap sesuai. Ulangi pada lebar ponsel dan kunjungan ulang.
Catat hasil yang terlihat beserta keterbatasannya. Jika percobaan belum dilakukan, tulis “belum diuji”; jangan mengisi perkiraan penghematan atau skor. Keberhasilan satu tampilan tidak membuktikan semua halaman dan perangkat akan sama.
Dalam catatan serah terima, tulis bagian yang diperiksa dan keputusan yang masih terbuka. Misalnya: “judul sudah cocok dengan keluarga yang diminta, tetapi pergantian baris pada paragraf belum diuji”. Lampirkan tangkapan elemen dan alamat aturan terkait, bukan sekadar pesan bahwa font perlu dioptimalkan. Pengembang berikutnya dapat melanjutkan pemeriksaan dari bukti yang sama, sementara pengelola blog mengetahui bagian mana yang belum layak diubah.
Sebelum perubahan tema produksi dipertimbangkan, siapkan cadangan Blogger beserta pengaturan terkait dan minta perubahan diarahkan ke aturan yang sudah ditemukan. Tidak ada perubahan tema yang dilakukan oleh panduan ini. Hasil akhirnya adalah keputusan terukur tentang font tertentu, bukan janji kenaikan peringkat atau percepatan indeks.
Komentar
Posting Komentar