Teks yang sama bisa tampil dengan huruf berbeda di setiap komputer: font yang kita tulis di CSS mungkin tidak terpasang di perangkat pengunjung. Property font-family menyelesaikan masalah ini dengan menerima daftar pilihan, bukan satu nama tunggal. Browser membaca daftar itu dari kiri ke kanan dan memakai font pertama yang tersedia. Pada chapter ini kita membedah cara membaca daftar tersebut, aturan generic family yang wajib ada di ujungnya, serta stack font yang lazim dipakai website modern.
Cara Browser Membaca Daftar Font #
font-family menerima satu atau lebih nama font yang dipisah koma. Browser mengecek ketersediaan nama satu per satu dari kiri, lalu memakai font pertama yang ditemukan untuk seluruh teks elemen tersebut. Bila tidak ada nama yang cocok, browser jatuh ke generic family di ujung kanan.
body {
font-family: "Segoe UI", Roboto, Arial, sans-serif;
}Mari kita telaah daftar di atas:
"Segoe UI"— pilihan pertama yang khas Windows; kutip diperlukan karena namanya mengandung spasi.Roboto— pilihan kedua untuk Android dan ChromeOS.Arial— pilihan ketiga yang hampir selalu tersedia di desktop.sans-serif— generic family sebagai jaminan terakhir.
Generic Family: Fallback yang Wajib Ada #
Generic family tidak merujuk font tertentu, melainkan keluarga bentuk huruf. Browser menyediakannya sendiri sehingga selalu tersedia di semua perangkat.
| Generic family | Bentuk huruf | Cocok untuk |
|---|---|---|
serif | berkaki, dengan garis kecil di ujung huruf | teks editorial, kesan klasik |
sans-serif | tanpa hiasan di ujung huruf | teks antarmuka dan isi modern |
monospace | setiap karakter berlebar sama | kode, angka tabular |
cursive | menyerupai tulisan tangan | aksen dekoratif |
fantasy | dekoratif dan penuh gaya | judul yang ingin mencolok |
system-ui | font antarmuka milik sistem operasi | teks UI yang menyatu dengan OS |
Karena generic family selalu tersedia, konvensinya tegas: tutup setiap daftar font-family dengan satu generic family. Ini jaring pengaman — bila seluruh nama font tidak terpasang, tampilan teks tetap masuk keluarga huruf yang kita inginkan.
Demo berikut menampilkan kalimat yang sama dalam tiga keluarga huruf:
Mengutip Nama Font #
Nama font yang mengandung spasi wajib dibungkus kutip, tunggal atau ganda:
h1 {
font-family: "Times New Roman", Georgia, serif;
}Nama tanpa spasi seperti Roboto atau Verdana boleh ditulis tanpa kutip. Kebiasaan yang aman: beri kutip pada semua nama font, kecuali generic family — "sans-serif" berkutip dianggap nama font biasa, bukan kata kunci, sehingga jaring pengamannya hilang.
Stack yang Sering Dipakai #
Website modern biasanya menyimpan daftar font di custom properties agar konsisten di seluruh halaman:
:root {
--font-teks: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--font-kode: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace;
}
body { font-family: var(--font-teks); }
pre, code { font-family: var(--font-kode); }system-ui mengikuti font antarmuka milik sistem operasi; -apple-system dipertahankan demi Safari versi lama, dan deret di belakangnya mengisi perangkat lain.
Ringkasan #
font-family bekerja dengan daftar fallback yang dibaca dari kiri ke kanan: font pertama yang tersedia menang, dan generic family di ujung kanan menjamin teks tetap tampil layak di semua perangkat. Nama ber-spasi dikutip, generic family tidak, dan stack siap pakai seperti system-ui membuat tampilan menyatu dengan sistem operasi. Dengan jenis huruf sudah terpilih, chapter berikutnya mengatur seberapa besar huruf itu tampil melalui font-size.