Berikut adalah contoh penulisan font-family:
selector {font-family: family-name, generic-family;}Contoh real untuk pengaturan font selector heading (h1) di dalam CSS:
h1 {font-family: ”Trebuchet MS”, Helvetica, sans-serif;}
family-namefamily-name adalah nama dari kumpulan beberapa font yang sejenis, seperti contoh Trebuchet MS Normal, Trebuchet MS Bold, Trebuchet MS Italic, Trebuchet MS Bold Italic, jadi family-name untuk font-font tersebut adalah Trebuchet MS.
Di dalam “family-name” kita bisa memasukkan lebih dari satu pilihan family-name, seperti contoh diatas ada “Trebuchet MS” dan “Helvetica” kemudian pada urutan terakhir ada “sans-serif” ini yang disebut dengan
generic-family. Dianjurkan untuk selalu memasukkan generic-family pada setiap akhir dari properti font-family.
Untuk family-name yang menggunakan spasi atau lebih dari satu kata harus ditulis didalam tanda petik, ”Trebuchet MS”.
Ketika browser akan menampilkan konten yang berupa teks, font yang digunakan adalah yang berada di urutan pertama dari family-name, sebagai contoh diatas adalah Trebuchet MS jika font-font ini tidak ditemukan maka browser akan mencoba mencari font-font jenis Helvetica jika font-font ini tidak ditemukan juga maka browser akan menggunakan standar font-nya masing-masing yang bertipe sans-serif sebagai alternatif terakhir.
Jadi untuk menghindari hal tersebut diatas maka dianjurkan bagi para pembuat website atau webmasters agar menggunakan font standar yang kemungkinan besar sudah tersedia di setiap komputer pengguna, klik link berikut ini untuk melihat list dari
font-family standar.
generic-familyTerdiri dari 5 jenis type yaitu: serif, sans-serif, cursive, fantasy dan monospace.
Untuk lebih jelasnya perhatikan contoh berikut:
Tulisan dengan type serif
Tulisan dengan type sans-serif
Tulisan dengan type cursive
Tulisan dengan type fantasy
Tulisan dengan type monospace
Dari hasil percobaan di 5 web browser untuk font type “fantasy” hanya Internet Explorer yang benar-benar berfantasi.
Tipe Serif biasa digunakan untuk kebutuhan printer karena bentuknya yang lebih lembut dan halus, tipe sans-serif cocok digunakan untuk website karena lebih tebal dan jelas sehingga tulisan akan lebih mudah terbaca. Tipe cursive dan fantasy bisa digunakan untuk gambar maupun judul website dan tipe monospace adalah untuk kode dan membuat efek mesin ketik.
Font Families standar yang sering digunakan.
font-family: "Arial Black", Gadget, sans-serif;
Preview:
“Arial Black”, Gadget, sans-serif;font-family: Arial, Helvetica, sans-serif;
Preview:
Arial, Helvetica, sans-serif;font-family: "Andale Mono", "Monotype.com", monospace;
Preview:
“Andale Mono”, “Monotype.com”, monospace;font-family: "Bookman Old Style", serif;
Preview:
“Bookman Old Style”, serif;font-family: "Comic Sans MS", cursive;
Preview:
“Comic Sans MS”, cursive;font-family: "Courier New", Courier, monospace;
Preview:
“Courier New”, Courier, monospace;font-family: Courier, monospace;
Preview:
Courier, monospace;font-family: fixedsys, monospace;
Preview:
fixedsys, monospace;font-family: Georgia, serif;
Preview:
Georgia, serif;font-family: Garamond, serif;
Preview:
Garamond, serif;font-family: Impact, Charcoal, sans-serif;
Preview:
Impact, Charcoal, sans-serif;font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
Preview:
“Lucida Sans Unicode”, “Lucida Grande”, sans-serif;font-family: "Lucida Console", Monaco, monospace;
Preview:
“Lucida Console”, Monaco, monospace;font-family: "MS Gothic", monospace;
Preview:
“MS Gothic”, monospace;font-family: "MS Sans Serif", Geneva, sans-serif;
Preview:
“MS Sans Serif”, Geneva, sans-serif;font-family: "MS Serif", "New York", sans-serif;
Preview:
“MS Serif”, “New York”, sans-serif;font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
Preview:
“Palatino Linotype”, “Book Antiqua”, Palatino, serif;font-family: Symbol, sans-serif;
Preview:
Symbol, sans-serif;font-family: System, sans-serif;
Preview:
System, sans-serif;font-family: Tahoma, Geneva, sans-serif;
Preview:
Tahoma, Geneva, sans-serif;font-family: Techno, Impact, sans-serif;
Preview:
Techno, Impact, sans-serif;font-family: "Times New Roman", Times, serif;
Preview:
“Times New Roman”, Times, serif;font-family: "Trebuchet MS", Helvetica, sans-serif;
Preview:
“Trebuchet MS”, Helvetica, sans-serif;font-family: Verdana, Geneva, sans-serif;
Preview:
Verdana, Geneva, sans-serif;font-family: Wingdings, "Zapf Dingbats", sans-serif;
Preview:
Wingdings, “Zapf Dingbats”, sans-serif;font-family: Webdings, sans-serif;
Preview:
Webdings, sans-serif;Contoh Penggunaan di Kode HTML :
<div style="background:#555;color;:blue;font-family:Cursive;font-weight:bold;font-size:27px;padding:5px;float:left; .... dst;"> Teks dan isi yang lain </div>
Tabel Font-Family :
| KODE : | Bentuk Font : |
| font-family:Arial; | Arial |
| font-family:Arial Narrow; | Arial Narrow |
| font-family:Arial Unicode MS; | Arial Unicode MS |
| font-family:Cataneo BT; | Cataneo BT |
| font-family:Comic Sans MS; | Comic Sans MS |
| font-family: Courier; | Courier |
| font-family:Courier New; | Courier New |
| font-family:Cursive; | Cursive |
| font-family:Dauphin; | Dauphin |
| font-family:Georgia; | Georgia |
| font-family:Helvetica; | Helvetica |
| font-family:Helvetica Neue; | Helvetica Neue |
| font-family:Lucida; | Lucida |
| font-family:Lucida Console; | Lucida Console |
| font-family:Lucida Sans; | Lucida Sans |
| font-family:Monospace; | Monospace |
| font-family:Monotype Corsiva; | Monotype Corsiva |
| font-family: Sans serif; | Sans serif |
| font-family:Sans-serif; | Sans-serif |
| font-family:MS Sans serif; | MS Sans serif |
| font-family:Square721 BT; | Square721 BT |
| font-family:Tahoma; | Tahoma |
| font-family:Times New Roman; | Times New Roman |
| font-family:Trebuchet; | Trebuchet |
| font-family:Trebuchet MS; | Trebuchet MS |
| font-family:Frutiger; | Frutiger |
| font-family:Droid Serif; | Droid Serif |
| font-family:Geneva; | Geneva |
| font-family:Fantasy; | Fantasy |
| font-family:Palatino Linotype; | Palatino Linotype |
| font-family:Impact; | Impact |
| font-family:Calisto MT; | Calisto MT |
