Font Family pada CSS
Mengubah jenis font dengan mengatur font family pada CSS
Ada banyak jenis atau gaya font yang bisa digunakan untuk menampilkan text di sebuah situs.
Sebuah situs bisa punya lebih dari satu jenis font.
Sangat penting untuk menyajikan font yang mudah dibaca dan sesuai dengan karakter situs kamu.
Font family umum pada CSS
Ada 5 font umum yang bisa digunakan pada CSS, dikenal sebagai generic font:
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
Masing-masing jenis font ini punya ciri khas yang berbeda.
1. Serif
Font serif punya baris di bagian bagian ujung penulisannya. Biasanya digunakan untuk yang bersifat formal.

*Perhatikan bagian yang dilingkari
contoh font serif:
"Times, Times New Roman, serif"
2. Sans-serif
Serif tidak punya baris tambahan di setiap sisinya. Tampilannya menjadi terlihat minimalis dan modern.
contoh font sans-serif:
"Times, Times New Roman, Georgia"
3. Monospace
Semua hurufnya punya lebar yang sama. Memberi kesan “robot” atau “mekanik”.
contoh font Monospace:
"Andale Mono, Courier New, Courier"
4. Cursive
Seperti tulisan tangan
contoh font Cursive:
"Comic Sans, Apple Chancery, Bradley Hand"
5. Fantasy
Tulisan yang penuh gaya dan sangat beragam
contoh font Fantasy:
"Impact, Luminari, Chalkduster"
Cara menggunakan font-family pada CSS
Properti yang digunakan adalah font-family
. Dimana nilainya bisa diberi lebih dari satu, yang berperan sebagai fallback
, ketika font pertama tidak disupport, maka bisa lanjut ke font berikutnya.
Untuk penulisan, jika lebih dari satu kata, maka gunakan tanda kutip.
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
Hasil
Times New Roman - Serif
Arial Helvetica - Sans Serif
Lucida - Monospace
Web safe fonts
Font-font di atas dikategorikan sebagai web safe font, yang artinya aman untuk digunakan di website. Ketika orang lain mengaksesnya dari komputer atau device yang berbeda, bisa diharapkan font yang sama yang akan tampil.