Tips Agar Teks Terlihat Saat Web Font Gagal Dimuat

Pengujian sebuah karya mutlak diperlukan untuk mengetahui hakekat. Tidak terkecuali dengan template yang dihasilkan seorang blogger. Dan salah satu poin tersebut terkait dengan font yang diambil dari network. Jenis ini dikenal dengan web font yang diakses melalui link yang terdapat pada theme.

Masalah ini diketahui setelah melakukan pengujian theme karya perdana saya. Meskipun belajar web desain otodidak tidak menghalangi keinginan untuk mencari tahu. Sehingga dari sini paham ada banyak tool yang wajib diketahui seorang blogger.

Salah satu diantaranya yaitu PageSpeed Insight dari Google. Tool ini digunakan untuk menilai kinerja theme yang kita buat. Lalu apa hasilnya? "Ensure text remains visible during webfont load". Ini satu notifikasi yang terlihat disana saat pengujian theme. 

Setelah mengetahui keterangan tersebut lalu bagaimana solusinya? Notifikasi ini ditandai dengan icon segitiga warna merah lho. Tertarik dengan bahasannya? Yuks, kupas tidak tuntas seputar tips agar teks terlihat saat web font gagal dimuat.

tips agar teks terlihat saat web font gagal muat


Tips Agar Teks Terlihat Saat Web Font Gagal Dimuat

Beberapa browser akan menampilkan tulisan sebuah blog setelah web font berhasil dimuat. Efeknya terjadi pada jaringan internet yang diakses sangat lambat. Karena cara kerja itu menyebabkan browser menunda untuk menampilkan teks. Kekosongan tersebut terjadi hingga web font berhasil dimuat. 

Untuk mengatasi hal ini, berikut solusi yang disarikan Chrome Developers.

1. Login ke dashboard Blogger.

2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

3. Tempatkan kode berikut diantara tag <b:skin><![CDATA[/* dan ]]></b:skin>.

4. Klik icon "Save" untuk menyimpan perubahan theme.

5. Dengan cara tersebut diatas sepertinya sudah berhasil karena sebelumnya terlihat seperti ini:

6. Dan setelah menempatkan baris kode pada nomor 3 diatas tidak lagi terlihat catatan: "Ensure text remains visible during webfont load".

7. Cara lainnya yang belum dicoba yaitu menambahkan parameter pada bagian akhir URL Google Font dengan:"&display=swap. Ini belum dicoba karena theme karya perdana hingga saat ini belum menggunakan Google Font. Namun demikian tidak mengapa ikut disertakan di sini. Bagi yang mau silahkan tambahkan parameter tersebut sehingga terlihat seperti baris kode di bawah ini. 

5. Penjelasan tambahan untuk solusi tersebut yaitu dengan melakukan "preload" web font yang dibutuhkan sesegera mungkin. Caranya dengan meletakan atribut yang meminta browser agar mengunduh font ini dengan segera serta menggunakannya sebagai font prioritas utama. Karena kita tidak tahu boleh jadi web font yang gagal dimuat terletak pada domain yang berbeda.

6. Sayangnya, tutorial yang dijelaskan oleh Web.dev itu cocok untuk website yang memiliki akses ke dalam cpanel alias menggunakan sewa hosting. Karena font yang dimaksud memang diletakan ke dalam penyimpanan lokal. Hal ini sebagaimana dalam tutorial yang menjadi referensi di atas dengan baris kode:"href="/assets/Pacifico-Bold.woff2".

7. Lalu bagaimana bagi website atau blog yang menggunakan custom domain? Sebardi Blog merupakan salah satu diantara website tersebut. Dalam hal ini saya akan mencoba solusi itu meskipun entah hasilnya akan menjadi prioritas utama ketika web font gagal dimuat ataukah tidak?

8. Barangkali ada yang ingin mencobanya, berikut ini baris kode dari referensi web.dev yang sudah diadaptasi untuk lingkungan blogger (dengan menambahkan garis miring sebelum >). Jangan lupa, baris kode ini tempatkan pada bagian <head>.

9. Simpan template.

10. Silahkan uji lagi apakah ada perubahan? Jika nilainya naik dari sebelumnya itu pertanda baik.


Kesimpulan

Tips agar teks terlihat meskipun web font gagal dimuat sudah kita bahas. Solusi dari masalah tersebut ternyata bisa dengan beberapa metode. Namun cara termudah untuk menghindari teks tidak tampil karena web font masih loading yaitu dengan menampilkan font sistem untuk sementara melalui css.

Dengan memasukkan baris kode css tersebut dapat menghindari kekosongan teks di sebagian besar browser modern yang tidak menampilkan teks karena web font gagal dimuat. Demikian kupas tidak tuntas hari ini seputar tips agar teks terlihat saat web font gagal dimuat.

Semoga benar-benar tidak tuntas.

Hehe......😁

Baca Juga

Tidak ada komentar:

Posting Komentar