Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS

Belajar CSS - Cara Merubah Font Dengan CSS (font-family)

Oleh Wahyup 1 komentar
Assalamulaikum Teman Teman, Selamat Datang kembali pada halaman blog Awonapa Jr.
Jika pada materi sebelumnya kita membahas tentang..

Belajar CSS - Mengenal Property box-sizing dan Vendor Previx pada CSS 
Maka pada artikel ini kita akan membahas tentang Cara Merubah Font Dengan CSS (font-family). Beberapa materi yang akan kita bahas pada kesempatan ini yaitu...

Pembahasan

1. Mengenal Font
2. Mengenal Jenis-Jenis Font
3. Cara mengubah Font Dengan CSS

Merubah Font dengan CSS
Merubah Font Dengan CSS
Baik teman-teman, kita langsung saja masuk kebagian pembahasan yang pertama yah..

Mengenal Font

Apa itu Font?
Font Adalah jenis huruf yang biasa digunakan di dalam sebuah dokumen seperti pada Microsoft Office, ataupun dokumen lainnya. 
Microsoft mengartikan Font adalah, desain grafis yang di terapkan ke kumpulan angka, simbol dan karakter.

Secara umum font ini sudah tersedia di dalam Sistem Operasi kita, dan apabila teman-teman mengInstall sebuah software seperti MS Office, ataupun Photoshop sudah pasti font teman teman akan bertambah sesuai bawaan yang ada di dalam Software tersebut.

Mengenal Jenis-jenis Font Standar CSS

Font Generik / Font Standar adalah jenis Font yang umumnya tersedia di hampir semua sistem, Jika di kategorikan sesuai jenis bentuknya, itu terdapat 5 Jenis Font Standar / Font Generik yaitu serif, sans-serif, monospace, cursive,  dan fantasy.

Jenis Font Serif

Font `serif` adalah jenis font yang memiliki `kaki` pada setiap hurufnya. Contoh jenis font serif adalah Times New Roman, Georgia, Cooper Black, Gramond dan lain-lain. Font jenis ini biasanya digunakan untuk media cetak kertas karena akan terkesan rapi dan mudah dibaca.

Jenis Font Sans-Serif

Font San-Serif ini kebalikan dari font Serif. "San" itu artinya "tanpa". Jika serif pada setiap akhir huruf terdapat garis kecil. San-Serif tidak memiliki garis kecil. Contohnya seperti : Arial, Comic Sans MS, Tahoma, Verdana.

Jenis Font Monospace

Dari namanya saja sudah jelas. "Space" yang berarti spasi. Jenis font ini memiliki spasi yang cukup besar dari setiap hurufnya. Terlihat dari jarak per huruf. Dan juga memiliki kesamaan ukuran. Contohnya seperti : Courier New, OCR-A, NotCourier-sans, dan Rursus Compact Mono.

Jenis Font Cursive

Font jenis "cursive" adalah jenis font yang "meniru" tulisan tangan atau kaligrafi. Contoh dari font ini adalah Comic Sans. Font jenis ini biasanya digunakan untuk aspek tulisan yang tidak terlalu "formal".

Jenis Font Fantasy

Font dengan jenis "fantasy" adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dll. Font jenis ini jarang digunakan untuk text halaman.


Cara Mengubah Font Dengan CSS

Baik teman-teman karena diatas kita sudah mempelajari hal-hal dasar yang penting dalam pembuatan web, maka kita masuk ke materi Inti nya.

Untuk merubah Font pada CSS, kita akan menggunakan property CSS font-family. Terdapat cara lain yaitu menggunakan @font-face. Namun pada saat ini kita akan menggunakan font-family terdahulu, Berikut contoh dari Penggunaan font-family.

HTML
<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Latihan Font CSS</title>
 </head>
 <body>
  <div>
   <h1>Belajar Font External Di CSS</h1>
   <p id="serif">
    Hai Semua, Halo Teman Teman , Bagaimana Keadaan Teman Teman Semua? Semoga Baik Baik saja yah. Oke pada Kesempatan ini, kita akan memasuki Materi Selanjutnya dari HTML, yaitu CSS. Ingin mengetahui apa itu CSS lebih lengkap? Mari kita jelajahi di Blog Ini!
   </p>
   <p id="sanserif">
    Hai Semua, Halo Teman Teman , Bagaimana Keadaan Teman Teman Semua? Semoga Baik Baik saja yah. Oke pada Kesempatan ini, kita akan memasuki Materi Selanjutnya dari HTML, yaitu CSS. Ingin mengetahui apa itu CSS lebih lengkap? Mari kita jelajahi di Blog Ini!
   </p>
   <p id="monospace">
    Hai Semua, Halo Teman Teman , Bagaimana Keadaan Teman Teman Semua? Semoga Baik Baik saja yah. Oke pada Kesempatan ini, kita akan memasuki Materi Selanjutnya dari HTML, yaitu CSS. Ingin mengetahui apa itu CSS lebih lengkap? Mari kita jelajahi di Blog Ini!
   </p>
  </div>
 </body>
</html>

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

#sanserif {
 font-family: Arial, Helvetica, sans-serif;
}

#monospace {
 font-family: "Courier New", Courier, monospace;
}

Jika kita coba sesuai dengan Syntak di atas maka hasilnya akan seperti ini..

CSS font-family
Merubah Font pada CSS

Aturan Aturan

Di dalam penulisan font-family, teman-teman bisa mengisi 1-3 atau lebih jenis font yang akan digunakan, namun biasanya dianjurkan hanya menggunakan 3 saja.
Cara kerja nya seperti ini, jika terdapat 
 font-family: "Times New Roman", Times, serif; 
Maka browser akan memulai dari font yang "Times New Roman", namun jika font tersebut tidak ada, maka akan menggunakan font Times, dan seterusnya.

Hal yang perlu di ingat dalam memberikan nama font yaitu.
  • Untuk setiap penulisan nama font, huruf pertama pada tiap kata harus menggunakan huruf besar, contohnya: penulisan font “arial” harus ditulis menjadi “Arial” . Tetapi aturan ini tidak berlaku untuk font ‘generik’ seperti monospace dan sans-serif.
  • Untuk memisahkan antara satu font dengan font lainnya, gunakan tanda koma.
  • Jika nama font memiliki spasi, maka harus ditulis didalam tanda kutip, seperti: ”Times New Roman”.

Baik teman teman, mungkin cukup sekian materi mengenai Cara Merubah Font Dengan CSS (font-family), InsyaAllah kita akan melanjutkan nya dengan membahas Cara Menggunakan @font-face di artikel berikutnya.

Terimakasih Sudah berkunjung :)
Salam Semangat!! 

1 komentar untuk "Belajar CSS - Cara Merubah Font Dengan CSS (font-family)"