Web Fonts

Sampai chapter ini, seluruh contoh memakai font bawaan sistem — pilihan yang aman karena tidak ada berkas tambahan yang perlu diunduh. Masalahnya, font yang terpasang di setiap perangkat pengunjung berbeda-beda, sementara identitas visual sebuah merek biasanya melekat pada font tertentu. Web fonts menyelesaikan masalah ini: berkas font ikut diunduh bersama halaman melalui aturan @font-face, sehingga semua pengguna melihat font yang sama. Kita bedah anatomi aturannya, perilaku selagi berkas font belum siap, pilihan self-hosting versus CDN, catatan lisensi, dan cara meredam pergeseran tata letak.

Anatomi @font-face #

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

Mari kita baca baris demi baris:

1. @font-face adalah aturan tingkat atas — ditulis berdiri sendiri, di luar selector mana pun.
2. font-family: "Inter" di dalam @font-face hanyalah penamaan: nama inilah yang dipanggil pada deklarasi body di bawahnya. Nama boleh bebas tetapi harus sama persis saat dipanggil.
3. src: url(...) format("woff2") menunjuk berkas font. Format woff2 adalah pilihan modern — kompresinya paling ringkas dan didukung seluruh browser modern.
4. font-weight: 400 menyatakan berkas ini melayani ketebalan 400; browser hanya memakainya untuk teks yang membutuhkan ketebalan itu.
5. font-display: swap mengatur perilaku selagi berkas belum siap — dibahas pada bagian di bawah.

Demo berikut memperlihatkan mekanisme fallback itu — kedua kartu memanggil font yang tidak terpasang, sehingga browser turun ke calon berikutnya di stack:

Inilah mekanisme yang sama yang membuat halaman tetap terbaca selagi berkas web font menyusul di belakang.

Beberapa Ketebalan dan Variable Font #

Satu @font-face melayani satu berkas. Untuk ketebalan lain, ulangi aturannya dengan berkas dan nilai font-weight yang sesuai:

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

Variable font menyederhanakan urusan ini: satu berkas menyimpan seluruh rentang ketebalan, dan kita menyatakannya sebagai rentang:

@font-face {
  font-family: "InterVar";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

Rentang 100 900 berarti satu berkas melayani semua ketebalan dari 100 sampai 900 — satu unduhan menggantikan banyak berkas.

font-display: Selagi Berkas Font Menyusul #

Berkas font bisa berukuran ratusan KB, sementara teks tidak boleh menunggu. Deskriptor font-display memilih skenarionya:

Dua singkatan yang sering muncul di literatur: FOIT (Flash of Invisible Text) — pengguna menatap area kosong dulu — dan FOUT (Flash of Unstyled Text) — teks tampil sejak awal dengan font fallback, lalu bertukar. Nilai swap menjadi pilihan umum karena informasi tersedia sejak detik pertama; harganya adalah pergeseran kecil pada saat penukaran terjadi.

Self-Hosting, CDN, dan Lisensi #

Keduanya sah. Proyek kecil sering mulai dari layanan CDN, sedangkan situs yang memperhatikan performa dan privasi cenderung memilih self-hosting.

Satu catatan yang tidak boleh dilewati: font punya lisensi. Tidak semua font yang terpasang di komputer boleh dipublikasikan sebagai web font. Gunakan font dengan lisensi yang jelas — misalnya lisensi terbuka seperti OFL — dan baca ketentuannya sebelum berkas font diletakkan di server.

Meredam Pergeseran Saat Fallback #

Karena FOUT menukar font di tengah jalan, lebar teks bisa bergeser dan tata letak ikut terdorong. Deskriptor seperti size-adjust dan ascent-override menyetel metrik font fallback agar menyerupai font utama:

@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 90%;
}

Font Inter-fallback kemudian diletakkan sebelum Inter pada font-family stack; ukurannya disetel supaya perbedaan saat penukaran nyaris tidak terasa. Fitur ini didukung browser modern — periksa dukungannya bila target kita mencakup browser lama — dan tersedia alat bantu daring yang menghitung nilainya secara otomatis.

Kesalahan Umum #

Ringkasan #

@font-face memperkenalkan font baru ke halaman: beri nama, tunjuk berkas woff2, nyatakan ketebalan atau rentangnya, dan setel font-display: swap agar teks tampil sejak awal dengan fallback. Pilih self-hosting bila kontrol menjadi prioritas, layanan CDN bila ingin cepat, dan pastikan lisensinya mengizinkan pemakaian web. Font sudah terpasang; chapter berikutnya menyentuh elemen teks yang paling interaktif: tautan.