Banyak web developer terdahulu mengalami kesulitan untuk menggunakan font sesuai keinginannya, problemnya ber macam2 , dan solusi yang ada ber macam2 juga. Beberapa solusi yang ada, antara lain :
1. Menggunakan CSS ( menggunakan
@font-face { } ) memanggil file font bertipe TTF, OTF, EOT (untuk windows)
2. Menggunakan service web font , misal : typekit, linotype, fontdeck dll
3. Menggunakan fungsi graph dari server side programming (misal : GDlib di php)
tentunya dengan segala kelebihan dan kekurangan masing2.
Ada satu alternatif lagi cara menggunakan font pada web, yaitu dengan menggunakan Cufon . prinsip dari Cufon adalah, mengconvert font ke dalam bentuk Json data, dan untuk render font menggunakan library Cufon.
kelebihan menggunakan Cufon adalah kita cuma butuh satu format font untuk di convert ke Json data, dan font support untuk semua browser (FF, IE, Opera, Safari dll) .
Step penggunaannya sangat mudah,
2. Pilih font yang anda gunakan , format ( TrueType (TTF) , OpenType (OTF), Printer Font Binary (PFB) atau PostScript fonts )
4. Simpan/Download hasil generate font ke folder web .
5. Include file core cufon dan font hasil convert di tag header HTML .
6. Tambahkan cufon function untuk render font hasil convert. syntaxnya : Cufon.replace('#id_target_element')
<script type="text/javascript">
Cufon.replace('#cufon-area');
</script>
Untuk script lengkapnya lihat sample berikut :
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#cufon-area {
font: normal 400px;
text-align: center;
margin-top:100px;
}
</style>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="1st_Sortie_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('#cufon-area');
</script>
</head>
<body>
<div id="cufon-area">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</body>
</html>
Cek hasilnya pada link ini :
demo
Selamat mencoba .
Comments
klo gak mau pake banyak file font punyanya google webfonts, gak perlu didownload di link,import aja
saiya buka di IE8 & IE9 bisa
coba d' cekidot dsana:
testing url: http://demo.whmcs.com/
pake font google yg bernama 'Ubuntu':
cssnya: http://demo.whmcs.com/templates/default/css/whmcs.css
bisa kok
bagusnya buat saiya, bisa pilih fonts dan bikin collections juga ada meteran Impact on page load time jadi kita bisa nyeimbangin keindahan dan kecepatan load halaman web kita
Ada sedikit masalah ketika konten kita diload pake AJAX, cufonnya ga jalan. Jadi, kita harus menyelipkan script cufon replace pada konten parsial tersebut.