Ibaratnya seperti ikan, hewan yang satu ini memiliki banyak jenis dan semua jenis ikan itu tetap dinamai dengan ikan atau keluarga ikan apapun bentuk dan warnanya. Demikian juga dengan font, ia memiliki banyak jenis dan semua jenis font itu juga tetap dinamai dengan font atau keluarga font, dalam dunia desain dikenal dengan font-family. Kita dapat mengatur jenis font apa yang akan ditampilkan dalam sebuah halaman web dengan properti font-family.
Secara garis besar, nilai dari font-family dikelompokkan menjadi dua bagian

1. Family Name
2. Generic Family

Jika kita menetapkan Family Name, maka sebaiknya kita juga menambahkan Generic Family di akhir penulisan properti font-family mengingat adanya kemungkinan jenis font yang kita pilih tidak bisa ditampilkan karena tidak tersedia dalam sistem komputer kita. Oleh karena itu, jika font tersebut benar-benar tidak ditemukan, maka browser akan menggunakan standar font-nya masing-masing yaitu Generic Family.

Family Name

Family Name adalah kelompok font yang memilki jenis serupa seperti Trebuchet MS Normal, Trebuchet MS Bold, dan Trebuchet MS Italic. Jenis font ini biasa kita temui ketika kita membuat dokumen dalam office word atau aplikasi sejenis.

Generic Family

Generic Family adalah jenis font standar yang dipersiapkan sebagai pengganti jika font-family yang kita pilih tidak tersedia/terinstal dalam sistem komputer kita. Berikut ini adalah lima jenis Generic Family dengan deskripsi singkat

1. Serif
   Jenis font ini memiliki detail tebal dan tipis pada setiap tepinya.
2. Sans-Serif
   Jenis font ini sifatnya lurus tegak ke atas pada tiap tepinya. Untuk resolusi layar yang lebih kecil, font ini sangat cocok karena akan mudah dibaca.
3. Cursive
   jenis font ini memiliki efek tulis tangan sehinga cocok untuk gambar atau judul website.
4. Fantasy
   Jenis font ini memiliki tipe yang hampir sama dengan cursive namun akan lebih sempurna bila kita menggunakan browser Internet Explorer.
5. Monospace
   Jenis font ini memiliki lebar yang sama pada setiap karakternya sehingga lebih cocok untuk penulisan kode karena efeknya seperti hasil dari mesin ketik.

Sintaks CSS

Sintaks CSS Font-Family

p {
   font-family: value (nama font);
  } 

1. Value dari properti font-family diisi dengan nama font yang kita tentukan
2. Apapun jenis family name yang kita tentukan sebaiknya diakhiri dengan generic family
3. Pisahkan dengan tanda koma , antara satu font dengan font yang lain
4. Jenis font yang terdiri lebih dari satu kata harus diapit dengan tanda petik ganda (double quotes) " " kecuali yang sudah terpisah dengan tanda strip, seperti sans-serif

Contoh

p {
   font-family: "Times New Roman", Times, serif;
  } 

Kombinasi Font Family

Di bawah ini merupakan kombinasi font family berdasarkan generik famili.

Serif

font-family	Normal	Bold
Georgia, serif	Teks Normal	Teks Tebal.
"Times New Roman", Times, serif	Teks Normal.	Teks Tebal.
"Palatino Linotype", Palatino, "Book Antiqua", serif	Teks Normal.	Teks Tebal.

Sans-Serif

font-family	Normal	Bold
Arial, Helvetica, sans-serif	Teks Normal.	Teks Tebal.
"Arial Black", Gadget, sans-serif	Teks Normal.	Teks Tebal.
Impact, Charcoal, sans-serif	Teks Normal.	Teks Tebal.
Tahoma, Geneva, sans-serif	Teks Normal.	Teks Tebal.
"Trebuchet MS", Helvetica, sans-serif	Teks Normal.	Teks Tebal.
Verdana, Geneva, sans-serif	Teks Normal.	Teks Tebal.

Monospace

font-family	Normal	Bold
Courier, monospace	Teks Normal.	Teks Tebal.
"Courier New", Courier, monospace	Teks Normal.	Teks Tebal.
"Lucida Console", Monaco, monospace	Teks Normal.	Teks Tebal.

Cursive

font-family	Normal	Bold
"Comic Sans MS", cursive	Teks Normal.	Teks Tebal.
"Courier New", Courier, monospace	Teks Normal.	Teks Tebal.
"Lucida Console", Monaco, monospace	Teks Normal.	Teks Tebal.