Tutorial Belajar CSS: Cara Merubah Jenis Font HTML dengan CSS (font-family)

Posted on

Pada panduan kali ini, kita akan mempelajari cara merubah jenis font yang digunakan pada text HTML dengan CSS. Property yang akan kita pelajari yakni: font-family.


Keterbatasan Jenis Font di pada Web Browser

Font yakni jenis huruf yang digunakan di pada sebuah dokumen. Di program pengolah kata seperti Microsoft Word, terdapat puluhan bahkan ratusan jenis font yang dapat kita pilih. Font-font ini berasal dari program Windows atau dari beberapa program lain.

Bila kamu menginstall program tambahan seperti Adobe Photoshop, program ini pun membawa font sendiri yang akan ditambahkan ke pada jenis-jenis font yang terdapat di pada Windows, dan karena font ini yakni bawaan program, karenanya tak seluruh komputer mempunyai font ini.

Apabila kita membangun sebuah dokumen dan mencetaknya seketika, menggunakan font apapun yang terdapat di komputer tak akan menjadi masalah. Namun apabila kamu membangun dokumen yang akan digunakan di pada komputer lain, sebaiknya menggunakan font standar yang kemungkinan besar akan terdapat di komputer tujuan.

Pada memilih jenis font bagi laman, kondisi yang sama pun menjadi pertimbangan urgen. Di pada CSS, kita dapat menggunakan pelbagai jenis font sesuai dengan desain yang diinginkan. Namun font yang akan ditampilkan di web browser sepenuhnya berasal dari komputer user (pengunjung web). Bila kita memilih font yang tak standar, karenanya desain web yang telah dirancang serapi mungkin akan menjadi ’kacau’ karena dapat saja font yang kita pilih tak terdapat di komputer pengunjung.

Bagi mengatasi hal ini, salah satunya yakni dengan menggunakan font ’standar’ yang umum terdapat di pada pelbagai program operasi seperti Windows, Linux, Mac OS, dll. Menggunakan font-font standar ini akan ’menjamin’ desain web yang telah dirancang dapat didukung oleh mayoritas web browser.


Mengenal Jenis-jenis Font Standar CSS

Font Standar / Font Generik yakni jenis font yang umumnya terdapat di hampir seluruh program. Bila kita membagi jenis font menurut ’bentuknya’, terdapat 5 jenis font generik, yaitu serif, sans-serif, monospace, cursive, dan fantasy.

Jenis Font Serif

Font ‘serif’ yakni jenis font yang mempunyai ‘kaki’ di setiap hurufnya. Contoh jenis font serif yakni Times New Roman dan Georgia. Font jenis ini biasanya digunakan bagi media cetak kertas karena akan terkesan rapi dan gampang dibaca.

Jenis Font Sans-serif

Font dengan jenis ‘sans-serif’ yakni jenis font yang tak mempunyai ‘kaki’ di setiap ujung karakternya. Contoh dari font jenis ini yakni Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font jenis ini sering digunakan di media elektronik seperti web.

Jenis Font Monospace

Font berjenis ‘monospace’ yakni tipe font yang lebar setiap karakternya sama panjangnya. Huruf ‘i’ akan mengambil panjang yang sama dengan huruf ‘w’. Contoh dari font jenis ini yakni Courier, Courier New, dan Andale Mono. Biasanya font jenis ini digunakan bagi hal yang bersifat teknis, seperti penulisan contoh kode program.

Jenis Font Cursive

Font jenis ‘cursive’ yakni jenis font yang ‘meniru’ tulisan tangan atau kaligrafi. Contoh dari font ini yakni Comic Sans. Font jenis ini biasanya digunakan bagi aspek tulisan yang tak terlalu ‘formal’.

Jenis Font Fantasy

Font dengan jenis ‘fantasy’ yakni font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dll. Font jenis ini jarang digunakan bagi text halaman.


Cara Mengubah Jenis Font dengan Property font-family

Bagi menentukan jenis font dari sebuah text HTML, kita dapat menggunakan property CSS : font-family. Berikut yakni contoh penulisan kode CSSnya :

Seperti yang terlihat, nilai yang didukung oleh property font-family yakni nama-nama font yang diinginkan. Saya menyebutnya ‘nama-nama’ karena kita dapat memberikan lebih dari 1 nama font bagi 1 jenis faktor HTML.

Tujuan dari memberikan lebih dari 1 font, terkait dengan pembahasan di bagian awal panduan ini, yakni mengenai keterbatasan font yang terdapat di pada komputer pengunjung web kita.

Ketika kita mendefenisikan nilai font-family selaku: “Duru Sans”, Verdana, sans-serif, dapat dilihat bahwa terdapat 3 jenis font, yakni font Duru Sans, font Verdana, dan font sans-serif.

Web browser pertama-tama kali akan mencoba ‘mencari’ font dengan nama “Duru Sans” di komputer user (pengunjung web) apabila tak ditemukan, karenanya web browser akan mencari font di urutan berikutnya, yakni font Verdana. Dan apabila tak ditemukan pun, karenanya web browser akan menampilkan font dengan jenis generik: sans-serif.

Font jenis generik ini dapat bernilai 1 dari nilai berikut: serif, sans-serif, monospace, cursive, dan fantasy. Bila kita menuliskan font-family: serif, karenanya web browser akan mencari font standar dengan kategori serif yang terdapat di pada komputer user. Penulisan font generik ini biasanya digunakan selaku alternatif terakhir pada nilai font-family.

CSS tak membatasi seberapa banyak jenis font yang boleh ’disediakan’ bagi nilai font-family. Kita bahkan dapat menulis 10 jenis font bagi 1 nilai font-family. Namun rata-rata web designer hanya membangun 3 alternatif, dimulai dari yang sangat spesifik, hingga dengan jenis font yang sangat umum (jenis font generik).

Pada memberikan nilai bagi nama font, terdapat beberapa aturan pe
nulisan. Aturan tersebut yakni selaku berikut:

  • Bagi setiap penulisan nama font, huruf pertama-tama di tiap kata mesti menggunakan huruf besar, contohnya: penulisan font “arial” mesti ditulis menjadi “Arial” . Tetapi aturan ini tak berlaku bagi font ‘generik’ seperti monospace dan sans-serif.
  • Bagi memisahkan antara satu font dengan font lainnya, gunakan tanda koma.
  • Bila nama font mempunyai spasi, karenanya mesti ditulis didalam tanda kutip, seperti: ”Times New Roman”.


Contoh pemakaian property font-family CSS dengan HTML

Bagi melengkapi panduan cara mengubah jenis font HTML menggunakan CSS, kita akan seketika mempraktekkannya menggunakan contoh program.

Berikut yakni contoh pemakaian property font-family pada CSS:

 Pada contoh pemakaian property font-family diatas, saya mencoba mengubah jenis font bagi selector CSS: body, h3 dan id:paragraf.


eBook CSS Uncover Duniailkom

Bila kamu ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari basic hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/