Bismillah. Banyak cara untuk mempercantik tampilan blog baik itu dengan custom template, percampuran warna, gambar-gambar pendukung, animasi dan lain sebagainya. Salah satu dari sekian banyak cara untuk mempercantik tampilan blog adalah memilih bentuk huruf yang menarik dan nyaman untuk dilihat. Bentuk huruf standar sebenarnya sudah cukup menarik, seperti arial, tahoma, verdana dan lain-lainnya, namun sebagian Blogger merasa tidak puas jika tampilan bentuk huruf-nya terlalu standar, kemudian mereka mencari alternatif untuk bisa menampilkan bentuk huruf yang berbeda dari standar namun tetap nyaman untuk dibaca. Google bahkan memfasilitasi para Blogger dengan memberikan font-font gratis dengan hosting yang gratis pula agar para Blogger memilih sendiri bentuk huruf yang sesuai dengan keinginan.
Namun keinginan para Blogger ternyata belum juga tercukupi dengan disediakannya huruf standar, tetap tidak puas walau Google menyediakan font secara gratis. Para Blogger tetap mengembangkan cara lain untuk mengubah bentuk huruf sesuai dengan keinginan. Jika anda merasa tidak puas dengan jenis huruf (font style) standar atau tidak puas dengan font dari Google maka ada alternatif lain yaitu Cufón.
Apa itu Cufón?
Cufón awalnya bertujuan sebagai alternatif pengganti sIFR (Scalable Inman Flash Replacement), walau pun belum mencapai tahap sempurna namun sudah bisa digunakan sebagai alternatif yang terbaik diantara metode lain. Dalam mencapai tujuan ambisius sang pengembang, maka Cufón harus memenuhi persyaratan sebagai berikut:
- Tidak dibutuhkan plug-in - hanya dapat menggunakan fitur asli (native) yang didukung oleh browser
- Kompatibilitas - ia harus bekerja pada semua browser yang tersedia di pasaran
- Kemudahan penggunaan - tidak ada konfigurasi atau mendekati konfigurasi nol yang diperlukan dalam penggunaan kasus-kasus standar
- Kecepatan - harus cepat, bahkan untuk jumlah teks yang cukup besar
Dan sekarang, setelah hampir satu tahun perencanaan dan penelitian Cufón telah dianggap memenuhi persyaratan ini.
Bagaimana cara kerja Cufón?
Cufon terdiri dari dua bagian individu yaitu sebuah generator font, yang mengubah font untuk format proprietary dan sebuah mesin rendering yang ditulis dalam JavaScript.
Pada kenyataannya generator merupakan bagian kecil dari antarmuka berbasis web yang dikembangkan oleh FontForge. Pertama, generator dibuat dengan kustom script FontForge berdasarkan input pengguna dan kemudian menjalankannya, hasil generator disimpan sebagai font SVG. Font SVG kemudian diurai dan dikonversi dari jalur SVG ke jalur VML. Ini merupakan langkah penting dalam mencapai kinerja terbaik bagi Internet Explorer, yang mendukung VML asli (native). Dokumen yang dihasilkan kemudian diubah menjadi font SVG. Font SVG kemudian diurai dan dikonversi dari jalur SVG ke jalur JSON dengan mencampurkan fungsi JavaScript. Hal ini memiliki banyak keuntungan diantaranya:
- Untuk mengintegrasikan font, kita hanya perlu memuat tag standar <script> sebagaimana file JavaScript lainnya dan font akan terdaftar secara otomatis.
- Tidak diperlukan penguraian file lagi secara manual pada sisi klien
- File eksternal JavaScript eksekusinya akan diblok sampai font telah dimuat, hal ini untuk membantu penampilan font yang bebas flicker dan penggantian font yang bersih
- File JavaScript font di kompress dengan sangat baik. Jika tidak di kompress biasanya ukuran file menjadi sangat besar, sedangkan dengan di kompress ukuran file biasanya 60-80% lebih kecil dari pada aslinya.
Untuk sisa font (jika ada) proses ini kemudian diulang untuk dikirimkan kembali ke generator dan file JavaScript yang dihasilkan dikirim kembali ke klien dengan nama file yang khas.
Bagaimana penyajian (rendering) Cufón?
Proses penyajian Cufón sedikit lebih rumit. Terdiri dari 3 bagian mesin, yaitu; sebuah mesin inti yang menyediakan fungsi API dan fungsi-fungsi umum lainnya dan dua buah mesin penyaji (render). Salah satu mesin penyaji digunakan untuk membuat bentuk VML yang digunakan untuk Internet Explorer (untuk versi 5.5) dan satu mesin penyaji menggunakan elemen HTML <canvas> untuk dukungan yang lebih luas. Karena jalur data sudah VML, maka mesin VML lebih ringan melakukan pekerjaan penyajian. Sedangkan mesin canvas, bagaimana pun harus menkonversi seluruh jalur ke setting yang sesuai dengan perintah penggambaran yang disediakan oleh canvas API. Pada awalnya hal ini sangatlah rumit, tetapi solusi ditemukan setelah dua kali penulisan ulang diselesaikan dalam bentuk generasi kode dan cache, sehingga penyajian menjadi sangat cepat. Inline SVG pada mulanya di pertimbangkan namun dengan cepat ditolak karena penyajian pada browser menjadi lebih lambat untuk jenis browser yang mendukung penuh Cufón.
Browser apa yang didukung Cufón?
Dibawah ini daftar Browser yang didukung Cufón:- Internet Explorer 6, 7 and 8
- Internet Explorer 9 beta (termasuk 1.09i)
- Mozilla Firefox 1.5+
- Safari 3+
- Opera 9.5+ (9.01+ juga termasuk 1.10)
- Google Chrome 1.0+
- iOS 2.0+
- Opera Mini (untuk versi tertentu)
Bagaimana membuat file font (huruf) Cufón?
Sebelum mengintegrasikan Cufón kedalam blog, seperti dijelaskan diatas bahwa Cufón memerlukan dua (dalam penjelasannya ada tiga mesin) file JavaScript individu, yaitu file yang berfungsi sebagai mesin inti dan file yang berfungsi sebagai mesin penyaji. File yang berfungsi sebagai mesin penyaji didalamnya berisi jenis font (huruf) yang akan kita gunakan pada blog. Namun file ini haruslah dibuat terlebih dahulu sebelum digunakan. Dalam penjelasan ini akan dibagi menjadi dua metode, yaitu:
Metode Rumit (Membuat Sendiri)
Langkah 1
Siapkan file font berupa TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) dan PostScript. Atau anda bisa mencari dan mengunduhnya disini.
Langkah 2Konversi file font yang telah kita unduh menjadi file JavaScript sebagai mesin penyaji font dengan menggunakan bantuan Online Cufón Generator (cara menggunakan Online Cufón Generator akan dibahas pada artikel terpisah) atau menggunakan salinan Cufón generator sendiri yang bisa diunduh dari GitHub.
Langkah 3Unduh file JavaScript yang dihasilkan dari konversi. Nama file yang dihasilkan akan mencakup nama font dan ukuran font (seperti nomor 400 adalah setara dengan "normal" dan 600 berarti "tebal/bold"). Jadi, misal, versi tebal (bold) dari Bitstream Vera Sans akan menghasilkan sebuah file bernama Bitstream_Vera_Sans_600.font.js. Nama file tidaklah harus sama, tapi itu membuat kita lebih mudah untuk mengidentifikasi font yang telah kita buat.
Langkah 4Upload file JavaScript yang sudah kita unduh ke dalam hosting file milik kita dan catat alamat URL file JavaScript Cufón tersebut untuk diikutsertakan pada blog kita. (Lihat artikel dibawah ini "Bagaimana menggunakan Cufón pada Blogger?" pada langkah 4. Alamat yang sudah kita catat untuk menggantikan http://URL/Nama_Font_Anda.font.js)
Metode Mudah (Langsung Download)
Langkah 1
Pilihlah jenis font yang akan kita gunakan pada situs CufónFonts.com
Langkah 2
Unduh (Download) file Cufón melalui link "Cufón File Download" dan cari tombol unduhan "Font Download sebagai Cufón" pada bagian bawah halaman
Langkah 3Upload file JavaScript yang sudah kita unduh ke dalam hosting file milik kita dan catat alamat URL file JavaScript Cufón tersebut untuk diikutsertakan pada blog kita. (Lihat artikel dibawah ini "Bagaimana menggunakan Cufón pada Blogger?" pada langkah 4. Alamat yang sudah kita catat untuk menggantikan http://URL/Nama_Font_Anda.font.js)
Bagaimana menggunakan Cufón pada Blogger?
Integrasi Cufón pada Blogger sebenarnya cukup sederhana. Ikuti langkah dibawah ini:Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:
Untuk penggunaan satu jenis font:
<script src='http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i' type='text/javascript'/>Untuk penggunaan jenis font yang lebih dari satu:
<script src='http://URL/Nama_Font_Anda.font.js' type='text/javascript'/>
<script type='text/javascript'>
Cufon.replace('h1, #judul');
</script>
<script src='http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i' type='text/javascript'/>Khusus untuk Internet Explorer:
<script src='http://URL/Nama_Font_Anda1.font.js' type='text/javascript'/>
<script src='http://URL/Nama_Font_Anda2.font.js' type='text/javascript'/>
<script type="text/javascript">
Cufon.replace('h1, #judul', { fontFamily: 'Nama Font 1' });
Cufon.replace('h2, .title', { fontFamily: 'Nama Font 2' });
</script>
Beginilah Internet Explorer yang selalu saja terjadi masalah pada JavaScript, Elemen HTML ataupun CSS dan termasuk Cufón. Dalam beberapa kasus yang ditemui, terjadi jeda (delay) penggantian font asli dengan font Cufón akan. Kita dapat menghindarkan jeda tersebut dengan menuliskan script dibawah ini tepat diatas tag </body> atau sebelum script lainnya, misal; script Google Analytic.
<script type="text/javascript"> Cufon.now(); </script>Langkah 5
Simpan template dan preview blog anda...
Selamat mencoba dan semoga berhasil. Happy Blogging :)
