Properti font-family

Properti font-family mengatur jenis font.

Sintaksis

selektor {
	font-family: nama font;
}

Catatan

Jika nama font mengandung spasi, misalnya, Times New Roman, nama tersebut harus diapit dengan tanda kutip tunggal atau ganda.

Catatan

Beberapa font yang mirip dapat didaftarkan dengan dipisahkan koma. Ketika browser menemukan font pertama dalam daftar, ia memeriksa ketersediaannya di komputer pengguna. Jika font tersebut tidak ada, font berikutnya dalam daftar diambil dan juga dianalisis untuk kehadirannya. Oleh karena itu, beberapa font meningkatkan kemungkinan bahwa setidaknya satu diantaranya akan ditemukan pada komputer klien.

Daftar biasanya diakhiri dengan kata kunci, yang menggambarkan jenis font (semua font termasuk dalam suatu jenis) - serif, sans-serif, cursive, fantasy atau monospace. Jika browser tidak menemukan satupun dari font yang ditentukan di komputer pengguna, maka browser akan memilih salah satu font dari jenis yang ditentukan.

Jenis Font

Jenis	Deskripsi
`serif`	Font dengan kait (serif).
`sans-serif`	Font tanpa kait (sans-serif).
`cursive`	Font miring (cursive).
`fantasy`	Font dekoratif dengan hiasan keriting dan efek yang tidak biasa.
`monospace`	Font monospace, lebar setiap karakternya sama.

Nilai default: font yang diatur di browser secara default. Biasanya ini adalah Times New Roman.

Contoh

Mari atur keluarga font menjadi Arial:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: Arial;
}

Contoh

Mari atur keluarga font menjadi Times New Roman. Karena nama font terdiri dari beberapa kata, maka kita apit dengan tanda kutip:

<p>
	Lorem ipsum dolor sit amet.
</p>

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

Contoh

Mari atur font dari grup serif (kemungkinan besar akan menggunakan Times New Roman):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: serif;
}

Contoh

Mari atur font dari grup sans-serif (kemungkinan besar akan menggunakan Arial):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: sans-serif;
}

Contoh

Mari atur font dari grup fantasy (mungkin tidak bekerja pada komputer Anda karena tidak adanya font tersebut):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: fantasy;
}

Contoh

Mari atur font dari grup monospace (huruf akan menjadi berukuran sama):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: monospace;
}