Cara Efektif Mengatasi Keterlihatan Teks Saat Pemuatan Font Web

Ketika mengaudit website menggunakan webtool lighthouse seperti PageSpeed Insights dan Web.dev Measure, mungkin kita akan melihat beberapa kesalahan pada hasil audit yang ditampilkan, salah satunya adalah "Ensure text remains visible during webfont load" yaitu rekomendasi untuk memastikan teks tetap terlihat selama pemuatan font web dengan menggunakan fitur CSS font-display optional untuk memastikan teks terlihat oleh pengguna saat font web dimuat.

Sebenarnya ada cara yang lebih efektif untuk untuk mengatasi permasalahan pemuatan font (Ensure text remains visible during webfont load). Tapi sebelum saya jelaskan lebih detail mari kita simak penjelasan berikut:

Font atau webfont merupakan file besar pada website, umumnya webfont membutuhkan waktu pemuatan (load) yang lama. Oleh karena itu beberapa browser memanipulasi pemuatan font dengan menyembunyikan teks sampai font selesai dimuat sehingga menyebabkan FOIT (flash of unstyled text) pada halaman web atau dalam bahasa indonesia disebut sebagai flash teks tanpa gaya.[ads id="ads1"]
Dalam pengoptimalan website sebaiknya kita menghindari kilatan teks tak terlihat dengan menampilkan konten sesegera mungkin menggunakan font sistem.

Dari keterangan diatas sebenarnya solusi terbaik untuk mengatasi permasalah keterlihatan teks saat pemuatan font (Ensure text remains visible during webfont load) sudah kita temukan yaitu menggunakan font sistem.

Semua sistem seperti microsoft, android, linux dan sebagainya pada dasarnya sudah memiliki beberapa jenis font di sistem mereka. Yang perlu kita ketahui adalah jenis font web apa yang tersedia di semua OS (Operating System).

Tetapi jika situs web atau blog kamu memang harus menggunakan font khusus seperti fontawesome dan google fonts (fonts.gstatic.com) ikuti lebih lanjut panduan untuk mengatasi masalah keterlihatan teks saat pemuatan font web.

Memastikan Teks Tetap Terlihat Selama Pemuatan Font Web

1. Gunakan font sistem yang paling umum misalnya Arial, sans-serif
2. Jika website menggunakan font google, import type font sesuai dengan kebutuhan situs web dan gunakan css &display:swap atau font-display:swap untuk memberi tahu browser agar memuat halaman dengan jenis font tersebut.
3. Untuk fontawesome import font kedalam html situs web kemudian tambahkan fitus css font-display:swap

Lihat contoh pemuatan google font (fonts.gstatic.com) dengan css font-display:swap

<style>

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');

</style>

Atau lihat contoh metode lainnya penerapan css font-display:swap pada google font (fonts.gstatic.com)

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

Cara Menambahkan Css Font-display:swap ke Fontawesome

1. Pertama import terlebih dahulu css fontawesome kedalam html website,
2. Kemudian pada bagian @font-face tambahkan css font-display:swap,
3. Lihat contoh penerapan css font-display:swap pada fontawesome.

<style>

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');

src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),

url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),

url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),

url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),

url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');

font-weight:normal;font-display:swap;font-style:normal}

</style>

Jika fitur css font-display:swap di terapkan dengan benar, insya allah masalah keterlihatan teks saat pemuatan font web (webfonts) akan teratasi. Namun perlu untuk diketahui bahwa tidak semua browser mendukung fitur css font-display:swap.