Font Display Swap

TL;DR: Font Display Swap adalah nilai properti CSS font-display: swap yang menginstruksikan browser menampilkan teks pakai font fallback selama web font asli masih diunduh. Hasilnya, pengguna tidak melihat halaman kosong dan skor LCP cenderung lebih baik.

Apa itu Font Display Swap?

Font Display Swap adalah salah satu nilai dari properti CSS font-display yang memberi instruksi spesifik soal kapan dan bagaimana browser merender teks selama proses muat web font. Tanpa font-display: swap, browser default menyembunyikan teks hingga font siap, kondisi yang dikenal sebagai FOIT (flash of invisible text). Akibatnya pengguna melihat ruang kosong selama beberapa ratus milidetik.

Dengan swap, browser segera memakai font fallback sistem, lalu menukar ke web font setelah file selesai diunduh. Pertukarannya cepat dan terlihat sebagai FOUT (flash of unstyled text), efek yang jauh lebih ringan dibanding FOIT.

Nilai Properti font-display

Untuk mayoritas situs personal brand dan blog bisnis di Indonesia, swap adalah default yang aman.

Kenapa Penting?

Berdasarkan praktik Core Web Vitals di proyek client UMKM, satu perubahan kecil dari font-display: auto ke font-display: swap sering memangkas waktu render teks utama 200 hingga 600 ms di koneksi 4G yang lambat. Untuk landing page yang mengandalkan headline persuasif, perbedaan ini langsung berdampak pada bounce rate. Google sendiri merekomendasikan pemakaian font-display: swap di web.dev sebagai best practice performa font.

Pertanyaan Umum

Apakah font-display: swap merusak desain?

Tidak merusak, tapi ada efek "shift" visual ketika font asli akhirnya termuat. Solusinya pakai fallback font yang metric-nya mirip dengan web font utama lewat size-adjust dan ascent-override.

Cocok dipakai di semua web font?

Hampir semua. Untuk ikon font kritis (misal logo brand), pertimbangkan block atau preload font. Untuk teks body, headline, dan UI, swap adalah pilihan default yang sehat.