Memperbaiki Font Berkedip Saat Memuat Halaman Web

Ketika membuat sebuah website, biasanya saya menggunakan custom font yang di-embed dari Google Font. Namun, pada saat halaman website pertama kali dimuat, browser membutuhkan waktu untuk mengambil font dari Google dan sebelum font tersebut berhasil dimuat, browser akan menggunakan system font dari device yang digunakan.

Setelah font dari Google berhasil dimuat, barulah browser akan menggunakan font tersebut dan akan terjadi kedipan pada halaman web karena penggantian font. Kedipan karena penggantian font ini disebut FOUT (Flash of Unstyled Text).

Terdapat solusi sederhana untuk mengatasi masalah ini. Saat kita meng-embed custom font dengan menggunakan tag <link/>, browser akan men-trigger event loading yang akan menambahkan class .wf-loading pada setiap elemen yang menggunakan custom font. Kita bisa memanfaatkan event ini dengan menambahkan kode CSS berikut ini ke halaman web kita:

CSS tersebut akan menyembunyikan teks selama custom font masih berusaha dimuat oleh browser untuk mencegah FOUT.