Styling Web Font dengan Javascript Cufon
Image from www.ilovetypography.com
Jika Anda senang bermain dengan tipografi di web, tentu sudah kenal dong dengan sIFR. sIFR (Scalable Innman Flash Replacement. Dibaca: siffer) adalah metode lain selain CSS3 font face untuk menampilkan text yang jenis fontnya bukan standard web fonts. Bedanya, kalau CSS3 font face menggandalkan browser versi agak baru, sIFR ini mengandalkan javascript dan browser flash plugin supaya bisa menampilkan web font dinamis. Membuatnya pun, kita membutuhkan Adobe Flash untuk membuat sIFR.swf nya. Ribet? Lumayan. Makanya developer lain berbondong untuk menciptakan alternatif bagi sIFR yang sudah terlanjur terkenal ini. Misalnya Cufon yang akan kita ulas cara menggunakannya.
Cufon – fonts for the people
Teknologi yang digunakan Cufon ini adalah javascript. Ya, tanpa Flash dan segala keribetan yang berkaitan dengannya. Mari langsung kita coba.
1. Download script js cufon di sini
2. Buka generator cufon, kemudian upload fontmu, lengkapi formnya.
Belum punya font yang mau dicobain? cari aja di dafont.com. Misalnya Indonesiana Serif buatan Fizz Labz.
Hasil generator ini adalah, Anda akan mendapatkan sebuah file javascript. Format namanya kurang lebih seperti ini: FTF_Indonesiana_Serif_Free__400.font.js
3. Implementasi
Letakkan script berikut pada bagian head
<!-- harus nih. nggak boleh kelewatan -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- memanggil script cufon -->
<script src="cufon-yui.js" type="text/javascript"></script>
<!-- memanggil javascript hasil generate di nomor 2 tadi -->
<script src="FTF_Indonesiana_Serif_Free__400.font.js" type="text/javascript"></script>
<!-- menggantikan elemen h1 dengan font indonesiana -->
<script type="text/javascript">
Cufon.replace('h1');
</script>
script berikut pada bagian body
<h1>This text will be shown in Indonesiana.</h1>
dan script berikut pada bagian sebelum /body (jika pada bagian ini ada script google analytics, atau script external lainnya, letakkan sebelum itu).
<!-- making internet explorer behave --> <script type="text/javascript"> Cufon.now(); </script>
Sehingga keseluruhan script menjadi seperti ini
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="FTF_Indonesiana_Serif_Free__400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Indonesiana.</h1>
<script type="text/javascript">
Cufon.now();
</script>
</body>
</html>
Dan jika ingin multiple fonts, contohnya adalah begini
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Vegur' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
<h2>This text will be shown in Myriad Pro.</h2>
</body>
</html>
Berbagai demo contoh penggunaan Cufon (bukan codingan diatas) bisa dilihat disini.
Jika Anda bosan dengan desain web yang kebanyakan elemen rounded corner dan berkilau. Tiada salahnya mulai berkreasi dengan desain super-minimalis dan permainan tipografi.
Oke. Flash lewat. Javascript sudah. Nah, sekarang, bagaimana cara styling webfont dengan PHP?
Di artikel berikutnya aja ya.
Punya komentar? Silakan berbagi.
referensi:
http://wiki.github.com/sorccu/cufon/usage
http://deconstructioncode.blogspot.com/2009/07/cufon-pilihan-lain-untuk-sifr.html
Postingan Terkait
8 komentar di “Styling Web Font dengan Javascript Cufon”
Tinggalkan Komentar
vyatri
Telah Menulis 20.
Lahir di Bontang, besar di Surabaya dan Qatar. Web programmer paling cupu dari PT.DheZign OS. Juga co-founder toko online produk muslim pertama Indonesia dengan konsep one-stop. Menggeluti linux sejak DO di semester 3 di IBMT. Sekarang sedang bercita-cita menjadi pengangguran.
Haloooo…hareee geneee masih pake IE6??!!
Selamat anda telah mendukung kehancuran dunia internet, karena telah mendukung penggunaan IE6
kan lumayan nambah dolar buat fixingnya
hihi, semua developer mah benci IE. tapi apa daya, penggunanya masih banyak – dan klien pengennya tampilannya baik di semua browser.
jadi kalau saya, untuk project pribadi sudah tidak support. kalau project komersial, charge for more! hihi
hehe.. beda context bang poniman
Masalahnya kalo kita terus 'mendukung' IE6, ga bakalan hilang tuh browser dari dinia yg fana ini.
Jadi kalo ada client yg minta agar webnya support ke semua browser boleh aja, kecuali IE6… dan ini adalah TUGAS SUCI para web designer untuk menjelaskannya
SETUJUUU??!!!
setuju. saya mah santai aja.. yang penting kalau klien sudah mantep minta tampilan ramah di IE6 dengan segala resikonya, kita sudah punya ilmunya.
Setuju BANGET!
Kita jelasin baik baik bahwa IE sudah gak musim. apalagi IE6. Dan bilang bahwa Mikocok aja dah gak support.
Tapi klo masih ngeyel… ya tinggal di kasih charge tambahan (yang mahal) beres :p
wah!!! berkat anda, saya bisa memulai hidup baruuu!, eh, web baruuu!!!