Cara Menggunakan Custom Fonts dengan CSS

Cara Menggunakan Custom Fonts dengan CSS
Posted by 000
Your Ads Here



Untuk yang baru-baru menekuni kegiatan WordPress atau membuat website dan menemukan bahwa membuat sebuah website itu menyenangkan dan mengasyikan, pasti sampai pada pertanyaan “Bagaimana menggunakan custom font pada website kita?”. Pasti seru nanti website kita jadinya! )

Kali ini saya akan menerangkan Bagaimana Cara menggunakan Custom Font pada dengan CSS !
Berikut tutorial nya : Sebuah website yang rapi hendaknya menggunakan CSS untuk mengatur styling dari websitenya, entah CSS itu embedded (jadi satu dengan file HTML ataupun terpisah sendiri dengan mempunyai nama file sendiri (mis : style.css).  CSS yang ada WordPress theme dapat ditemukan dalam folder  www.namadomain.com/wp-content/themes/namatheme/nama.css Di dalam CSS, font dideklarasikan dengan syntax :
body {font-family: Verdana, Arial, Helvetica,
Futura, sans-serif;
font-size: 1em;
padding:0;
margin:0;
}
ini artinya CSS akan mencari dan menggunakan jenis font ini, lalu bagaimana jika kita ingin menggunakan custom font pada CSS? berikut adalah syntaxnya :
@font-face {
font-family: FontKITA;
src: url('http://www.namadomain.com/fontkita.ttf');
font-weight: normal;
}
Sekarang Kita tinggal mengupload font yang kita inginkan dalam format ‘.ttf’ (true type font), deklarasikan dan buat sendiri font-family nya, dan deklarasikan kembali kedalam class mana yang ingin kita gunakan untuk memakai font tersebut seperti ini :
body {
font-family: FontKITA;
font-size: 1em;
padding:0;
margin:0;
}
Tapi, font yang saya mau upload formatnya bukan .ttf bagaimana dong ???? langsung aja kemari yah http://onlinefontconverter.com/ gak pake macem2, yang penting font yang kamu pake free dan bebas dari masalah hak cipta.

*Saya yakin pasti langsung pada gatel penasaran kan? Selamat mencoba!


Thanks to : www.Orangorangan.com

Your Ads Here

Your Ads Here

Your Ads Here

Your Ads Here

Newer Posts Newer Posts Older Posts Older Posts

Related Posts

Your Ads Here

Comments

Post a Comment