Font Custom dengan @font-face

Kenapa butuh font custom?

Font bawaan sistem (Arial, Times) aman tapi generik. Font custom memberi karakter unik ke websitemu. Caranya: daftarkan file font dengan aturan @font-face, lalu pakai seperti font biasa.

Menulis @font-face

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
}

Penjelasan tiap baris:

• font-family: nama panggilan yang kamu tentukan sendiri
• src: lokasi file font. Format woff2 adalah standar modern: paling ringan dan didukung semua browser baru
• font-weight/font-style: varian file ini (satu file biasanya hanya satu ketebalan, daftarkan tiap varian terpisah)
• font-display: strategi saat font belum selesai diunduh (dibahas di bawah)

font-display: swap itu penting

Tanpa font-display: swap, browser menampilkan teks kosong sampai font selesai diunduh. Ini disebut FOIT (Flash of Invisible Text) dan buruk buat pengalaman pengguna.

Dengan swap, browser langsung menampilkan teks pakai font cadangan, lalu menukarnya begitu font custom siap. Teks langsung bisa dibaca: jauh lebih baik.

@font-face {
  font-family: "Judulku";
  src: url("fonts/judulku-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

Memakai Google Fonts (cara cepat)

Kalau tidak mau hosting file sendiri, Google Fonts menyediakan ribuan font gratis:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

preconnect mempercepat koneksi awal. Parameter display=swap di URL fungsinya sama dengan font-display: swap.

Jangan rakus varian

Setiap ketebalan (400, 700) dan gaya (italic) adalah file terpisah yang harus diunduh. Minta hanya yang dipakai:

<!-- bagus: cuma 2 varian -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Makin banyak varian, makin berat halaman. Dua sampai tiga varian biasanya cukup buat satu website.

Catatan teknis: teks bisa "melompat" (layout shift) saat font tertukar karena lebar karakter berbeda. Kurangi efeknya dengan memilih font cadangan yang mirip, atau pakai properti size-adjust di @font-face buat menyelaraskan ukuran. Untuk situs konten, ini detail yang layak dioptimasi.

Rangkuman

Daftarkan font lewat @font-face dengan format woff2, selalu pakai font-display: swap supaya teks langsung tampil, dan unduh hanya varian yang benar-benar dipakai. Google Fonts adalah jalan pintas yang sah buat mulai cepat.