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