Menggunakan Font Face dengan CSS

Share

"Om Swastiastu"

Dalam penulisan teks yang kalian gunakan, mungkin banyak diantara kalian yang menggunakan font standar berupa Arial, Verdana, Tahoma dan beberapa jenis font standar lainnya. Kenapa tidak menggunakan font lain yang mungkin lebih enak dipandang. Ada beberapa alasan, diantaranya tidak semua orang didalam komputer mereka memiliki jenis font yang akan kita pakai. Kenapa? Karena jika kita mengggunakan font yang tidak dimiliki orang tersebut, tampilan web kita akan terlihat lain atau tidak semestinya ketika diakses oleh orang yang tidak mempunyai font tersebut. Biasanya jika ingin menampilkan bentuk font yang bergaya, kalian akan menggunakan gambar untuk memperlihatkannya.

Nah, dalam CSS bisa menggunakan sintaks @font-face untuk menampilkan font lain yang mungkin jarang dimiliki tiap orang. Dengan menggunakan sintaks ini kita tidak perlu takut untuk menggunakn jenis font lain karena walaupun tidak semua orang memilikinya tetapi mereka tetap dapat melihatnya.


Hal pertama yang harus kalian lakukan adalah menulis sintaks berikut ini:

@font-face{
 font-family: namafont;
 src: ('path-font/namafont.ttf');
}

Jika jenis font yang kita ingin pakai sudah di deklarasikan, maka selanjutnya adalah menggunakannya, cukup panggil dengan sintaks font-family dan isikan nama font yang kalian deklarasikan diatas.

.contohfont{
 font-family: namafont;
 text-align: center;
 font-size: 20px;
}

Misalkan saja saya ingin menggunakan font yahoo sebagai judul suatu paragraf, maka contoh aslinya seperti ini:

@font-face{
 font-family: Yahoo
 src: ("font/Yahoo.ttf");
}

Lalu panggil font tersebut.

.judul-teks{
 font-family: Yahoo, Arial, Tahoma;
 font-size: 18px;
 text-align: center;
 color: #ff0000;
}

Semoga trik ini membantu kalian.

"Om Santhi, Santhi, Santhi, Om"