Cara Merubah Jenis Font Dengan CSS

Penulis : Zulfikar Kategori : Belajar CSS

Cara Merubah Jenis Font Dengan CSS

Di seri tutorial sebelum nya kita sudah belajar cara memberikan warna dengan css , pada tutorial kali ini kita akan belajar cara merubah jenis font pada html dengan menggunakan css.

Font Family

Cara yang pertama kita akan merubah jenis font menggunakan font-family pada css, berikut ini contoh coding nya :

body {

   font-family: "Arial";

}

Pada contoh coding di atas, kita merubah jenis font pada html dengan Font Family Arial. Kita bebas memilih jenis font-family yang akan digunakan tetapi harus di pastikan jika jenis font nya umum karena keterbatasan ketersediaan font di tiap komputer.

Jika kita ingin menggunakan jenis font yang tidak umum, kita dapat melakukan nya dengan men load file font nya ke dalam css yang akan kita bahas nanti.

Fallback

Fallback adalah jenis font lain nya yang akan di gunakan jika font pilihan yang pertama tidak di temukan, berikut ini contoh coding nya :

body {

   font-family: "Arial", serif;

}

Pada contoh di atas kita ingin menggunakan font Arial pada body html, tetapi jika font arial tidak di temukan maka font berikut nya yang akan di gunakan yaitu serif.

Font Style

Dengan CSS kita juga dapat merubah style dari sebuah text, berikut ini contoh coding nya :

.style1 {

   font-style: normal;

}

.style2 {

   font-style: italic;

}

.style3 {

   font-style: oblique;

}

 

Font Face

Dengan font face kita bisa menggunakan file font sendiri tanpa harus ketergantungan keterbatasan ketersediaan font di tiap komputer.

Berikut ini contoh koding nya :

@font-face {

   font-family: font-saya;

   src: url(file-font.ttf);

}

body {

   font-family: font-saya;

}

pada contoh koding di atas kita menggunakan file font dengan nama file-font.ttf lalu memberikan nya nama font-saya lalu menggunakan jenis font nya pada body html.

Itulah beberapa cara untuk merubah jenis font pada html dengan mengunakan css, silahkan di praktekan agar di pahami.