Menggunakan font sendiri di website [firefox solved]
May 9, 2012 at 12:39 pm | blog, CSS3, template | No comment
Ada beberapa cara untuk menggunakan custom font. Menggunakan font tertentu mungkin yang tak lazim di gunakan oleh orang lain adalah salah satu cara untuk mempercantik website kita. Kita bisa mencari macam-macam font yang bisa kita pakai di font squirel atau di direktori font google.
Saya mengasumsikan anda memakai wordpress dengan hosting sendiri. Dan kira kira begini caranya. Di sini saya menggunakan Font Bebas Neue.
1. Masukan fontkit yang akan anda gunakan pada folder theme anda, anda bisa menggunakan folder tersendiri. Biasanya file font terdiri dari beberapa format file seperti otf/ttf, eot, woff dan svg .
2. Kemudian pada file css nya masukan script embed untuk fonnya menggunakan fontface
|
1 2 3 4 5 6 7 8 9 10 11 |
@font-face {
font-family: 'BebasNeueRegular';
src: url('font/BebasNeue-webfont.eot');
src: url('font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('font/BebasNeue-webfont.woff') format('woff'),
url('font/BebasNeue-webfont.ttf') format('truetype'),
url('font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
} |
3. Kemudian pada tentukan di mana font itu akan di gunakan
|
1 2 3 4 5 |
h1 { color: transparent;
font-family: 'BebasNeueRegular';
font-size: 6em;
font-weight: normal;
} |
Dan selesai..? Font anda berubah sesuai keingingan anda..!. Tapi coba, tidak semua browser bisa support embed font seperti ini. Salah satunya adalah firefox, Tambahkan dot slash di depan kode letak font pada css anda
|
1 2 3 4 5 6 7 8 9 10 11 |
@font-face {
font-family: 'BebasNeueRegular';
src: url('./font/BebasNeue-webfont.eot');
src: url('./font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('./font/BebasNeue-webfont.woff') format('woff'),
url('./font/BebasNeue-webfont.ttf') format('truetype'),
url('./font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
} |
Simpan kemudian di reload. Kalau editing anda masih di localhost, biasanya font di browser firefox bisa terbaca. Tapi jika sudah anda upload dan ternyata tidak berjalan di beberapa browser terutama firefox. Kita dengan terpaksa memberikan akses terhadap file lewat .htaccess.
Masukan script ini di file .htaccess anda .
|
1 2 3 4 5 |
<filesmatch "\.(ttf|ttc|otf|eot|woff)$">
<ifmodule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</ifmodule>
</filesmatch> |
. dan ini tutorial yang sempet saya rekam..! 
Buat para kisanak yang suka plurking, pasti tau dan harus tahu apa itu plurkit. Waktu make windows saya pernah install plurkit demi kenyamanan aktivitas plurk saya. Nah saat make ubuntupun ada 
Setelah di anggurin sekian lama blog dan modem SU-8300-u. Akhirnya modem ini bisa kepakai lagi di ubuntu sabily manaratku. Karena di anggurin tadinya tidak bisa ke detect ama ubuntu. Proses instalasi ini terjadi karena ketidak sengajaanku. Yang mengharuskan aku memakai modem SU-8300-u yang di lock oleh telkomsel. Setelah membeli kartu telkomsel, aku membeli paket 50 ribu untuk dua minggu unlimited. dan kira-kira begini prosess settingnya.