Select Language



Followers

IT Programmer. Powered by Blogger.

17 December 2011

Menggunakan Font Face dengan CSS

"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"



Comments:

Ada 3 comments pada “Menggunakan Font Face dengan CSS”
IT Programmer said...
pada hari 

di file CSS nya laahh..
kalo bisa di bagian paling atas..

serba serbi said...
pada hari 

mantap gan. Mau nanya gan. Kalau mau buat diartikel kita pakek css gimana? Untuk kata-kata yang penting. Biasanya kan menggunakan strong blod atau underline. Kalo menggunakan css gimana ya caranya

IT Programmer said...
pada hari 

untuk membuat huruf tebal atau garis bawah dengan CSS.. caranya seperti ini:

font-weight: bold;
text-decoration: underline;

Social Media


Facebook Page

Programming Tutorial


Info


Tips
Downloads
Friends
 
This Blog is proudly powered by Blogger.com | Template by Bali Web Development | Privacy Policy | Rise Up!!