Seperti kita semua sudah sedia maklum, penggunaan font pada website atau blog adalah terhad. Font yang biasa kita gunakan ialah Arial, Helvetica, Georgia, Tahoma, Lucida Grande, Verdana dan beberapa lagi (maaf, Comic Sans tak termasuk dalam senarai). Ada kalanya kita mahu gunakan font seperti Myriad Pro, Bitstream Vera dan lain lain, tapi tak boleh disebabkan pelawat website kita tak ada font tersebut. Disebabkan itu berbagai cara yang kita gunakan untuk menggunakan font yang lebih menarik untuk blog kita, seperti menggunakan imej ataupun sIFR. Tapi kini ada satu lagi cara yang boleh kita gunakan; Cufón,
Cufón merupakan salah satu teknik yang membolehkan kita menggunakan font yang lebih baik pada website atau blog kita. Dengan ayat yang mudah untuk difahami, satu script yang membolehkan kita menggunakan font yang agak fancy dalam blog atau website kita. Konsepnya sama seperti sIFR cuma ia tidak memerlukan Flash, tetapi bergantung kepada Javascript sepenuhnya.
Web Browser
Cufón boleh digunakan pada mana-mana web browser moden dengan syarat ia mesti support Javascript. Antara web browser yang telah diuji ialah:
- Internet Explorer 6, 7 and 8
- Mozilla Firefox 1.5+
- Safari 3+
- Opera 9.5+
- Google Chrome 1.0+
Keperluan Lain
- Cufón script
- jQuery Javascript Library (jika anda ingin gunakan classname atau ID sahaja)
- Font yang nak digunakan
Penggunaan
Cufón amat mudah untuk digunakan, tetapi terdapat beberapa langkah perlu dilakukan terlebih dahulu.
1. Dapatkan font yang anda inginkan
Kalau nak font yang lebih menarik, sila masuk ke website FontSquirrel ataupun DaFont. Pilihlah mana mana yang anda suka, tapi pastikan baca syarat penggunaannya terlebih dahulu. Ada yang membenarkan kita gunakan pada website, ada juga yang tidak. Untuk post ini saya gunakan font Sansation.
2. Convert font ke format Javascript
Sebelum kita boleh menggunakannya pada website kita, kita perlu convert font yang ingin kita gunakan kepada kod Javascript terlebih dahulu dengan menggunakan Font Generator mereka. Pada form tu ni ada beberapa bahagian sahaja kita kena ambil tahu, yang lain tu abaikan sahaja.
a. Pilih Font
Jika anda seorang yang tamak, anda boleh la upload 4 style font; regular, bold, italic dan bold italic. Tapi regular dan bold sudah cukup untuk saya.
b. Tentukan nama font dan accept EULA
Anda boleh biarkan nama untuk font-family itu kosong, atau berikan nama yang sesuai dan mudah untuk kita gunakan nanti. Dan kemudian kena accept End User License Agreement untuk menyatakan anda bersetuju bahawa font yang anda ingin gunakan tu boleh di gunakan pada website.
c. Pilih glyph
Bahagian ini agak penting, sebab lagi banyak pilihan yang anda pilih, lagi besar la saiz file javascript tu nanti. Cukuplah pilih 4 seperti gambar di bawah ni.
d. Bersetuju dengan syarat dan terma
Kali ini, pastikan anda tick I acknowledge and accept these terms pada bahagian bawah page tu.
e. Save file javascript
Selepas selesai anda perlu save file tu terlebih dahulu. Kemudian, kita perlu upload pada web server.
3. Upload ke web server
Bagi membolehkan kita gunakan script tadi tu pada website atau blog kita, kita kena upload pada web server yang boleh di akses dari Internet. Gambar di bawah ni menunjukkan file yang telah saya upload ke web server saya.
4. Kod Javascript
Sekarang kita kena buat linking ke javascript file tadi dalam template website atau blog kita. Masukkan kod kod kat bawah ni sebelum tag </head>.
<script src="http://www.syahzul.com/files/cufon/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://www.syahzul.com/files/cufon/cufon-yui.js" type="text/javascript"></script>
<script src="http://www.syahzul.com/files/cufon/Sansation_400-Sansation_700.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Sansation' });
Cufon.replace('h2', { fontFamily: 'Sansation' });
</script>
5. Kod Javascript untuk Internet Explorer
Disebabkan IE terkenal dengan masalahnya yang tak sudah, jadi kita kena masukkan kod ini pula pada bahagian bawah template, sebelum tag </body>.
<script type="text/javascript">Cufon.now();</script>
Ini contoh ringkas untuk penggunaan asas cufón. Sebenarnya boleh jadi lagi canggih, tapi kena banyak eksperimen.
Kelebihan
Antara kelebihan cufón berbanding sIFR ialah:
- Cufón tidak memerlukan sebarang plugin pada web browser
- Cufón boleh digunakan pada mana-mana web browser tanpa sebarang masalah
- Cufón mudah untuk digunakan
- Cufón lebih pantas dan cepat berbanding sIFR
Kekurangan
Setiap yang baik pastinya ada kelemahan dan kekurangan. Macam tu la jugak dengan script ni. Antaranya ialah:
- Bergantung sepenuhnya kepada Javascript
- Akan membuatkan website / blog kita load lebih lambat
- Tak boleh copy/paste teks yang gunakan cufon
- Tak boleh nak styling masa :hover event
Kesimpulan
Pada saya, cufón merupakan salah satu kelebihan untuk web designer macam saya. Dengan adanya script seperti ini, kreativiti kita tidak terbatas. Dan kebanyakan projek website yang saya buat, pasti akan gunakan cufón. Terpulang kepada individu itu sendiri sama ada ianya boleh digunakan atau tidak.
Ada komen?
