Gunakan font yang lebih menarik pada blog atau website dengan Cufón

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.

Demo

Kelebihan

Antara kelebihan cufón berbanding sIFR ialah:

1. Cufón tidak memerlukan sebarang plugin pada web browser
2. Cufón boleh digunakan pada mana-mana web browser tanpa sebarang masalah
3. Cufón mudah untuk digunakan
4. 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:

1. Bergantung sepenuhnya kepada Javascript
2. Akan membuatkan website / blog kita load lebih lambat
3. Tak boleh copy/paste teks yang gunakan cufon
4. 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?