The font-familyproperti mendefinisikan font yang diterapkan pada elemen yang dipilih. Jenis huruf yang dipilih bukan jenis huruf tunggal, tetapi "keluarga", dan dengan demikian mungkin bergantung pada nilai properti tipografi lainnya untuk memilih wajah yang benar dalam kelompok tersebut.
body ( font-family: Arial, Helvetica, sans-serif; )Nilai dapat berupa salah satu dari berikut ini:
- Nama keluarga font yang cocok dengan font yang disematkan di halaman atau tersedia di sistem pengguna.
- Serangkaian nama keluarga, dipisahkan dengan koma, yang dapat menyertakan nama keluarga umum
Jika beberapa nama keluarga digunakan, browser akan memilih nama pertama yang ditemukan, baik yang disematkan pada halaman menggunakan @font-faceatau diinstal pada sistem operasi pengguna.
Karena font-familytidak ada default atau nilai awal tertentu; nilai awal selalu bergantung pada browser dan / atau sistem operasi.
Nama Keluarga Generik
Jika beberapa nilai digunakan untuk satu deklarasi, disarankan untuk memiliki keluarga generik yang terdaftar terakhir sebagai cadangan untuk memastikan pengalaman tipografi terbaik:
code ( font-family: Courier, Monaco, monospace; )Dalam contoh di atas, "Courier" dan "Monaco" adalah nama keluarga sebenarnya dari font yang sebenarnya, sedangkan "monospace" hanyalah referensi umum untuk font apa pun yang diinstal pada sistem pengguna yang monospace.
Jika dua yang pertama tidak ditemukan terpasang, browser akan memilih opsi terbaik, tetapi hanya dari font monospace. Tanpa keluarga generik, font akan default ke font default apa pun pada sistem pengguna (kemungkinan serif atau sans-serif), yang tidak diinginkan.
Nama-nama keluarga generik meliputi serif, sans-serif, cursive, fantasy, dan monospace.
Jika nama keluarga cocok dengan nama keluarga generik, nama keluarga harus dikutip untuk menunjukkan bahwa itu tidak umum.
Nama Keluarga Multi-Kata
Jika nama keluarga berisi banyak kata, dipisahkan dengan spasi, disarankan untuk mencantumkan nama keluarga dalam tanda kutip (tunggal atau ganda):
code ( font-family: "Times New Roman", Georgia, serif; )Ini tidak selalu diperlukan, tetapi biasanya lebih aman untuk menyertakan kutipan untuk nama keluarga yang memiliki spasi atau karakter khusus.
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja | Bekerja |