Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- Cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Menggunakan Cufon untuk text font website

octopusoctopus
edited December 2011 in Artikel & Tutorial Komputer
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 ) 
3. Convert font yang telah anda pilih menggunakan cufon font generator http://cufon.shoqolate.com/generate/ 
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 
Dokumentasi lengkapnya di : https://github.com/sorccu/cufon/wiki/  

Selamat mencoba .

 

Tagged:

Comments

  • Skatel_Linux_comSkatel_Linux_com
    tambahan bagi yang siap pakai dan males generate, bisa dapetin fontnya pada library berikut http://www.cufonfonts.com/
  • promotorpromotor
    Saya pernah pake cufon tapi sekarang saya pake http://www.google.com/webfonts, tinggal link Font Facenya di css. Bisa di download juga dan host sendiri file font-nya.
  • octopusoctopus
    @promotor : nah itu masalahnya , kalo pake cuma pake font biasa, trus cm pake face CSS . coba jalanin di IE browser, gak akan jalan gan :) . kecuali bikin 1 format lagi font tipe EOT , tipe EOT harus generate lagi pake toolsnya microsoft . kenapa harus pake 2 tipe font yg beda TTF/OTF plus EOT ? dengan Cufon , cuma butuh 1 format yaitu font tipe json , gitu gan 
  • promotorpromotor
    edited January 2012
    font face web biasanya (.eot, .svg, .ttf, woff)

    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



  • Skatel_Linux_comSkatel_Linux_com
    Well, gw sekarang lebih suka pake google webfonts ketimbang cufon.
    Ada sedikit masalah ketika konten kita diload pake AJAX, cufonnya ga jalan. Jadi, kita harus menyelipkan script cufon replace pada konten parsial tersebut.
  • jdewanggajdewangga
    Kalo aku sih lebih suka download langsung font-nya gan. Selain mengurangi traffic load, juga mengantisipasi kalo2 google tiba2 ngambek trus gak konek sama IIX, atau gimana gitu :D
Sign In or Register to comment.