Mungkin teman-teman web developer sudah bosan menggunakan font-font standar yang sering ditampilkan ke dalam website. Sudah saatnya coba menggunakan teknik Font Embedded. Maksudnya adalah melakukan embed/ menyertakan file font ke dalam website.
Teknik ini biasa digunakan di dalam CSS 3. Sebenarnya sama saja dengan penggunaan CSS biasa. Yang membedakannya adalah melakukan definisi font yang akan digunakan pada awal baris kode CSS.
Namun teknik Font Embedded ini juga terkadang bisa membuat browser kita menjadi hang/ not reponding. Sehingga ada baiknya kita mengurangi menggunakan Font Embedded untuk semua font yang akan digunakan.
Sebelum menggunakan Font Embedded, kita siapkan terlebih dahulu file font yang akan kita gunakan. Kemudian upload file font tersebut ke http://www.fontsquirrel.com/fontface/generator . Klik tombol Add Font, kemudian kita centang/ collate Easy. Silahkan tunggu beberapa saat sampai proses berhasil. Apabila berhasil, maka dibagian paling bawah ada pilihan untuk mendownload kode CSS dan file font.
Font hasil dari generator tersebut berjumlah 3 yaitu file font yang berekstensi .eot, .ttf, dan .woff. Fungsi font-font tersebut adalah untuk “mengakali” tampilan font di beberapa browser. Sebagai sampel, saya sendiri mengupload font gravurcondensed-bold.ttf. Hasilnya adalah: gravurcondensed-bold-webfont.eot, gravurcondensed-bold-webfont.ttf, dan gravurcondensed-bold-webfont.woff. Pastikan file font tersebut disimpan ke dalam satu folder file CSS kita. Sedangkan untuk kode CSSnya akan digenerate menjadi:
@font-face {
font-family: 'GravurCondensed-BoldRoman';
src: url('gravurcondensed-bold-webfont.eot');
src: local('?'), url('gravurcondensed-bold-webfont.woff') format('woff'), url('gravurcondensed-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Untuk implementasi CSSnya nantinya menjadi:
@font-face {
font-family: 'GravurCondensed-BoldRoman';
src: url('gravurcondensed-bold-webfont.eot');
src: local('?'), url('gravurcondensed-bold-webfont.woff') format('woff'), url('gravurcondensed-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
body
{
color:#272526;
font-size:12px;
font-family:'GravurCondensed-BoldRoman', arial, verdana;
}
Nah sekarang CSSnya sudah siap digunakan. Untuk implementasi secara online, upload juga file fontnya. Semoga berhasil…
