Menentukan Jenis Font Sesuka Hati dengan CSS3

Menentukan Jenis Font Sesuka Hati dengan CSS3

Zaman dulu sebelum ada CSS3, para web designer jika ingin menampilkan font yang keren-keren maka mereka harus menampilkan tulisan tersebut sebagai file gambar, karena font yang keren tersebut belum tentu ada di komputer client atau user.

Tapi sekarang kita bisa menentukan jenis font sesuka hati kita di web dengan bantuan CSS3. Cara kerjanya, font tersebut kita upload ke hosting atau server kita, kemudian dengan kode CSS3 @font-face kita bisa mendefinisikan nama font family kita dan sumber file fontnya. Contoh tulisan di bawah

Tulisan ini menggunakan font: Legion_Slab.ttf
Hai apa kabar, selamat datang di website codingwear,
Di sini kita akan belajar bersama mengenai CSS, Javascript, PHP 

Kode CSS3 untuk menentukan jenis font

Mari kita lihat kode CSS3 untuk contoh di atas

<style>

@font-face

{

font-family: fontsaya;

src: url('dokumen/Legion_Slab.ttf');

}

#konten

{

font-family: fontsaya;

font-size: 15pt;

}

</style>

<div id="konten">

Tulisan ini menggunakan font: Legion_Slab.ttf<br>

Hai apa kabar, selamat datang di website codingwear,<br>

Di sini kita akan belajar bersama mengenai CSS, Javascript, PHP

</div>

Pada properti @font-face , pertama kita definisikan nama font family kita, misalnya saya kasih nama fontsaya, nama font family ini sesuka hati kita.

Setalah itu kita definisikan sumber filenya, jika anda mengupload file font di server yang berbeda, kita bisa menulisnya menjadi seperti: src: url('http://www.desrizal.com/css3/Legion_Slab.ttf').

Setelah kita definisikan nama font family dan sumber file font-nya di @font-face. saatnya kita atur elemen website kita, seperti kode CSS biasa menggunakan font-family.