Mengubah Font dengan @font-face

Pada beberapa waktu yang lalu saya mneulis tentang bagai mana cara mengubah font dengan metode Cufon, nah sekarang saya akan share bagaimana mengubah font pada blog dengan @font-face dengan memanfaatkan web gratisan di kernest.com. Mungkin sebelumnya mari kita sedikit membandingkan keunggulan dan kekurangan dari kedua metode tersebut, pada Cufon tulisan yang dihasilkan adalah berupa gambar berformat jpg sehingga tidak dapat langsung di copy paste, selain itu karena menggunakan javascript maka memerlukan berberapa waktu untuk membukanya, kelebihan dari metode ini hasilnya dapat di akses ke berbagai browser selain itu juga pilihan font akan semakin banya karena kita dapat mencari font sesuai keinginan kita untuk selanjutnya di upload. Untuk @font-face sendiri tidak bisa di akses jika di buka melalui Googlecrome, cuma kelebiah dari @font-face ini karena tidak menggunakan javascript sama sekali maka akan begitu cepat diakses dan hasil dari hurufnya bukan berupa gambar sepetihasil dari Cufon sehingga mudah untuk di copy paste. Pilihan Font yang disediakan di web ini lumayan banyak akan tetapi kita tidak bisa meng upload dari web lain jadi hanya terbatas sesuai yang ada di web ini.

Lankah-lankah nya adalah seperti di bawah ini:

Buka website dengan alamat kernest.com karena kita akan menngunakan layanan dari website ini.

Pilih font sesuai dengan keinginan kita yang sudah disediakan oleh kernest.

Registrasi ,Masukkan alamt web anda pada kotak dialog ini pada web kernes.com






Setelah masuk, akan ada halaman seperti di bawah ini:



kode dengan no 1 seperti pada gambar adalah Embed code yang harus di paste kan dibawah kode ]]></bskin>

Kode pada no 2 adalah kode yang dipastekan pada bagian yang akan kita ganti fontnya. misalkan kita mau ganti font pada judul posting cari kode

.post h3 {
margin:0px;
padding:0 0 4px;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

pastekan kode sesuai pada kode no 2 pada gambar di atas sehingga menjadi ;

.post h3 {
margin:0px;
padding:0 0 4px;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
font-family:'days';
}

"days" adalah nama font yang akan kita tampilkan. kita dapat membuat berbeda jenis font di tiap-tiap bagian blog kita karena di ernest.com kita dapat menyimpan beberapa jenis font yang dapt kita gunakan. dan tinggal mengganti nama font pada kode css kode kita sesuai dengan nama font kita di kernest.com

Kode no 4 adalah link dari kernes.com jika kita mau memasangnya

5. Selanjutnya adalah simpan perubahan tersebut, dan lihat hasinya.