Tentunya anda pernah mengalami masalah dimana font kesukaan/favorit anda tidak bisa ditampilkan dibrowser komputer lain karena pada komputer tersebut tidak mempunyai font yang sama dengan komputer anda.
Sekarang anda tidak perlu bingung lagi, karena hal ini sekarang bisa diatasi dengan menggunakan cufon-yui. Ngomong-ngomong, apa sih cufon-yui ini??? Cufon-yui adalah suatu script (javascript) yang bisa mengganti teks/font secara cepat dengan menggunakan fungsi canvas dan VML dari browser kita, tanpa perlu flash atau gambar. Caranya sangat gampang dan cepat, karena dari website cufon sudah disediakan generator yang siap untuk merender font anda. Sebagai contoh, ini saya berikan perbedaan menggunakan cufon-yui dan tidak.
Dari contoh diatas, bisa dilihat bahwa dengan menggunakan cufon-yui, kita bisa menampilkan font yang biasanya harus kita convert dulu ke bentuk gambar atau dalam bentuk flash.
Sebagai langkah awal, buatlah folder testing-cufon pada drive C: anda dan buatlah folder js sebagai sub-direktorinya. Ok, tidak panjang lebar, kita langsung praktek aja 🙂
Langkah 1 : Convert Font
Agar proses berjalan dengan sempurna, kita harus menggunakan converter yang disediakan oleh website Cufón. Pertama-tama, pilih font favorit/kesukaan anda dari folder C:\Windows\Fonts dan tempatkan di drive C:. Untuk bisa mengcopy font, anda langsung menekan Crtl+C pada font yang dipilih. Sebagai contoh, saya menggunakan font Jokerman.
Sebagai langkah awal, kita gunakan settingan default saja. Anda hanya perlu melakukan centang pada The EULAs of these fonts allow Web Embedding (without Adobe Flash) dan I acknowledge and accept these terms, setelah itu klik Let’s do this!. Setelah itu, simpan file anda pada folder js yang sebelumnya sudah anda buat yang berada pada folder testing-cufon.
Langkah 2 : Download Cufón
Dari halaman depan Cufón, klik kanan pada menu Download, lalu pilih Save As dan letakkan pada folder js.
Langkah 3 : Menyiapkan Dokumen HTML
Langkah terakhir, kita buat file html. Buka editor favorit anda, masukkan kode html standar, dan sebelum tag<head> masukkan kode berikut :
Penjelasan :
Baris 1 & 2 : adalah file yang dibutuhkan agar cufon bisa berfungsi dan merender font kita.
Baris 3 : adalah skrip yang mengaktifkan cufon agar mengganti semua h1 dengan font Jokerman.
Langkah 4 : Preventif Terhadap Browser IE
Untuk browser Internet Explorer, anda harus menambahkan script berikut agar proses render berjalan lancar.
Selesai : Download artikel
Jika anda masih bingung, silahkan download file berikut : source code
Jauhari
CUFON emang mantap
prazetyo
setuju mas jauhari. Tapi tahunya ya baru-baru aja 🙂
putu
Salam kenal mas!!!!! bagus infonnya. .
prazetyo
terima kasih
grandchief
Apakah bisa digunakan untuk wordpress mas
prazetyo
Malah saya menulis artikel ini memang untuk wordpress 🙂