Ganti Jenis & Gaya Font Pada HTML CSS


Secara default, setiap text yang kita buat dalam HTML akan menggunakan salah satu atribut font dari websafe font yaitu serif-fonts. Kita dapat merubah gaya / style font yang kita inginkan, style pada font ini disebutnya font-family alias keluarga font. Pada postingan sebelumnya, saya pernah jelaskan apa saja font-family default HTML. Silahkan lihat pada artikel tersebut lalu ikuti tutorial dibawah ini.

Jika kalian lebih senang melihat video (tutorial) dibanding membaca (tutorial), silahkan scroll kebawah dan klik pada link video untuk melihat video tutorialnya.

Disini, saya akan menggunakan default HTML font yaitu WebSafe Font seperti yang saya jelaskan pada artikel tersebut. Setelah kalian tentukan font mana yang ingin digunakan, sekarang silahkan tentukan tulisan mana yang indin diubah style font nya. Misalnya disini saya akan merubah tulisan yang ada pada tag p, maka silahkan berikan gaya / CSS untuk tag p tersebut seperti ini:

<style type="text/css">
  p {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  }
</style>

<p>Tutorial membuat text fonts - HTML CSS ~ Rio Bermano</p>

Setiap ingin mengganti jenis font, silahkan gunakan property “font-family” dengan isinya yaitu nama jenis font yang ingin digunakan. Tidak lupa juga pada isiĀ font-family ini berikan beberapa pilihan font yang dimasukkan (tidak cuma satu), fungsinya adalah untuk mengcover jika browser yang digunakan pengunjung tidak support jenis font yang pertama “Palatino Linotype” maka akan coba menggantinya dengan jenis font yang kedua “Book Antiqua” dan begitu juga seterusnya.

Secara default, browser akan membaca & menampilkan jenis font yang pertama dituliskan didalam font-family.

Masih bingung ? Lihat : Video tutorial cara mengatur font-family HTML CSS.

Selamat mencoba !


Jangan Lupa Share !!!

39
7 shares, 39 points

Apa Reaksimu ?

Bingung Bingung
8
Bingung
Kesal Kesal
6
Kesal
OMG OMG
8
OMG
Takut Takut
7
Takut
Keren Keren
5
Keren
Sedih Sedih
10
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki