Font web di WordPress: cara memakai font cantik tanpa memperlambat situs

Biaya tersembunyi dari font

Satu keluarga font dengan empat varian (regular, italic, bold, bold italic) dalam format WOFF2 bisa mencapai 100 KB atau lebih. Jika ditambah beberapa subset bahasa, ukurannya cepat membengkak.

Font yang terlambat dimuat menyebabkan dua masalah: teks tidak terlihat sementara (FOIT) atau berpindah gaya mendadak (FOUT). Keduanya memengaruhi pengalaman pengguna dan metrik CLS.

Lima aturan font yang cepat

• Pakai maksimal dua keluarga font dan tiga varian total.
• Gunakan format WOFF2 saja untuk browser modern.
• Host font di server sendiri agar tidak bergantung pada domain pihak ketiga.
• Tambahkan font-display: swap pada setiap @font-face.
• Preload font utama yang dipakai di bagian atas halaman.

Cara memeriksa hasilnya

Buka tab Network di browser dan filter berdasarkan Font. Catat jumlah berkas dan total ukurannya sebelum dan sesudah optimasi.

Jalankan Lighthouse atau PageSpeed Insights, lalu perhatikan LCP dan CLS. Targetnya LCP di bawah 2,5 detik dan CLS di bawah 0,1 untuk kategori baik menurut Core Web Vitals.

Angka acuan dan daftar periksa akhir

Gunakan angka acuan berikut untuk menilai apakah font Anda sudah efisien atau masih berlebihan.

• Total berkas font ideal: di bawah 100 KB per halaman.
• Jumlah permintaan font: maksimal 2 sampai 4 berkas.
• Target LCP: di bawah 2,5 detik.
• Target CLS: di bawah 0,1.

Setelah semua diterapkan, uji ulang di koneksi seluler yang diperlambat. Jika teks muncul tanpa berkedip dan skor stabil, tipografi Anda sudah cukup ringan untuk produksi.

Kesalahan yang perlu dihindari

Kesalahan klasik adalah memuat lima atau enam varian font hanya karena desainer memintanya. Kesalahan lain adalah memanggil font dari beberapa domain pihak ketiga, yang menambah waktu koneksi DNS dan TLS.

Hindari juga menimpa font bawaan sistem tanpa cadangan. Siapkan daftar font cadangan dengan ukuran serupa agar pergeseran tata letak saat font utama belum termuat tetap kecil.