• By Siti Asiah
• 17 September 2026

Layout Portal Berita Anda Suka Bergeser Tiba-Tiba? Font-Display Optional Solusinya

Pernahkah Anda sedang membaca artikel di HP, baru saja hendak menekan tombol "baca selengkapnya", tiba-tiba tombolnya bergeser ke bawah karena font tulisan baru saja selesai dimuat? Pengalaman menjengkelkan ini sangat umum terjadi pada portal berita dan majalah online yang menggunakan tipografi kustom untuk memperkuat identitas visual mereka, terutama bagi pembaca yang mengakses lewat jaringan seluler yang kurang stabil.

Fenomena ini dikenal sebagai Cumulative Layout Shift atau CLS, salah satu metrik Core Web Vitals yang diukur Google, dan sejak beberapa tahun terakhir sudah menjadi faktor yang turut memengaruhi peringkat pencarian sebuah website.

Kenapa Font Kustom Bisa Menggeser Seluruh Layout Halaman

Ketika browser memuat sebuah halaman web, teks akan lebih dulu ditampilkan menggunakan font fallback sistem sebelum font kustom benar-benar selesai diunduh. Masalahnya, font sistem dan font kustom hampir selalu punya ukuran, tinggi baris, dan lebar karakter yang berbeda. Begitu font kustom selesai dimuat dan menggantikan font fallback, ukuran teks ikut berubah, yang pada akhirnya menggeser posisi elemen-elemen lain di sekitarnya — judul turun, gambar bergeser, tombol yang tadinya di posisi tertentu jadi berpindah tempat.

Pada koneksi jaringan yang cepat, pergeseran ini mungkin tidak terlalu terasa karena font kustom selesai dimuat hampir bersamaan dengan render pertama halaman. Namun pada jaringan ponsel yang lambat, jeda antara render awal dengan font kustom yang selesai diunduh bisa cukup lama, sehingga pergeseran layout jadi jauh lebih terasa mengganggu bagi pembaca.

Font-Display: Optional sebagai Solusi Paling Efektif

Properti font-display di dalam deklarasi @font-face menentukan bagaimana browser memperlakukan teks selama proses pengunduhan font kustom berlangsung. Dari beberapa nilai yang tersedia, optional dianggap sebagai pendekatan paling efektif untuk mencegah pergeseran layout. Nilai ini pada dasarnya memberi tahu browser: hanya gunakan font kustom jika font tersebut sudah tersedia dengan sangat cepat pada saat render pertama halaman; jika tidak, browser cukup menggunakan font fallback secara permanen untuk kunjungan tersebut, tanpa perlu menunggu atau mengganti font di kemudian hari.

Dengan pendekatan ini, teks pada halaman akan selalu langsung tampil menggunakan font terbaik yang sudah tersedia saat itu juga — baik itu font kustom jika kebetulan sudah ter-cache di perangkat pembaca, atau font fallback sistem jika belum. Hasilnya, halaman tidak perlu melakukan proses render ulang setelah font kustom selesai diunduh, sehingga potensi pergeseran layout akibat font praktis bisa dihindari sepenuhnya.

Konsekuensi yang Perlu Dipahami

Penerapan font-display: optional memang efektif mencegah CLS, namun ada trade-off yang perlu disadari: pada kunjungan pertama pembaca yang belum memiliki font kustom tersimpan di cache browser, ada kemungkinan font kustom tersebut tidak akan pernah ditampilkan sama sekali untuk kunjungan itu — browser tetap memakai font fallback meski font kustom sebenarnya berhasil diunduh setelahnya. Font kustom baru akan digunakan pada kunjungan berikutnya setelah tersimpan di cache.

Karena itu, penting juga memilih font fallback yang karakteristiknya cukup dekat dengan font kustom, misalnya lewat properti seperti size-adjust yang membantu menyelaraskan ukuran antara font fallback dan font kustom, sehingga transisi antar kunjungan terasa lebih mulus. Beberapa portal berita besar juga mengombinasikan pendekatan ini dengan preload untuk font-font kritis yang benar-benar dibutuhkan sejak render pertama, agar peluang font kustom tampil sejak kunjungan awal tetap terjaga.

Kenapa Ini Sangat Relevan untuk Portal Berita dan Majalah Online

Portal berita dan majalah online biasanya mengandalkan tipografi kustom sebagai bagian penting dari identitas visual mereka, membedakan gaya penulisan judul dan body text dari kompetitor. Namun konten seperti ini juga umumnya diakses oleh pembaca dengan kondisi jaringan yang sangat beragam — dari koneksi WiFi kantor yang stabil hingga jaringan seluler di daerah dengan sinyal terbatas. Tanpa strategi font-loading yang tepat, pembaca dengan koneksi lambat akan mengalami pergeseran layout paling parah, justru pada momen ketika mereka sedang mencoba berinteraksi dengan halaman seperti menekan tautan artikel lain.

Implementasi yang Tepat Membutuhkan Strategi Menyeluruh

Menerapkan font-display: optional secara efektif bukan sekadar menambahkan satu baris kode di file CSS, melainkan perlu dikombinasikan dengan pemilihan font fallback yang tepat dan strategi pemuatan font kritis lainnya, disesuaikan dengan karakteristik konten dan pola akses pembaca masing-masing portal.

BogorWebsite.com membangun website portal berita dan majalah online dengan strategi pemuatan font yang dioptimasi sejak awal, termasuk penerapan deklarasi font-display: optional yang disesuaikan dengan kebutuhan tipografi masing-masing media, untuk memastikan skor CLS tetap terjaga meski diakses dari jaringan seluler yang lambat. Karena sistem yang digunakan dibangun secara custom, penyesuaian teknis seperti pemilihan font fallback yang tepat bisa dilakukan lebih presisi dibanding platform template yang strukturnya sudah baku. Bagi portal berita yang juga ingin performa teknisnya mendukung strategi pencarian organik jangka panjang, layanan jasa SEO BogorWebsite.com turut memperhatikan aspek Core Web Vitals sebagai bagian dari optimasi menyeluruh.

Detail Teknis Kecil, Pengalaman Baca yang Jauh Lebih Nyaman

Font-display optional memang terdengar sangat teknis dan mudah terlewat dalam proses pengembangan website pada umumnya. Namun bagi portal berita dan majalah online yang pembacanya datang dari berbagai kondisi jaringan, optimasi seperti ini bisa jadi pembeda antara pengalaman baca yang mulus dan yang terasa mengganggu akibat layout yang terus bergeser.

Diskusikan kebutuhan optimasi font loading untuk website portal berita atau majalah online Anda melalui WhatsApp 0812-3451-4325 atau kunjungi halaman kontak BogorWebsite.com.