Cara mengganti jenis huruf di blog atau website dengan font unik dengan cufon font

jenis font unik dan keren untuk blog

Dengan kemajuan teknologi web yang sangat pesat, sekarang jenis tulisan atau font untuk web atau blog sudah bisa diganti sesuai keinginan. Kalau sebelumnya jenis tulisan yang ada di blog atau web kita hanya sebatas font atau jenis tulisan standar yang ada diinternet saja, kini sudah bisa lebih variasi sesuai selera pemilik blog atau webnya.

Sebenarnya ada 3 cara untuk merubah tampilan bentuk tulisan yang ada di blog atau web :

  1. Cara pertama adalah mengganti semua tulisan dengan objek gambar.
    Hal ini memang cukup gampang dilakukan, tapi dampaknya web atau blog akan tampil lambat karena harus menampilkan gambar yang banyak. Dan juga jika ada perubahan text tulisan berarti anda harus mengubah juga gambarnya.
  2. Cara kedua menggunakan font online yang disediakan pihak kedua. Ini memang lumayan efektif, anda tinggal cari font yang sesuai trus mendapatkan script atau kode program, kemudian anda tempel di template blog atau web anda.
  3. Cara ketiga menggunakan font yang sudah ubah menjadi script dan diletakkan diserver web/blog sendiri, atau istilah teknisnya menggunakan Cufon Font. Dengan cara ini kita bisa berkreasi mengggunakan jenis font yang didownload di internet atau dari komputer kita sendiri.

Kali ini saya akan bahas dan coba pandu anda menggunakan cara ketiga yaitu menggunakan Cufon Font.

Caranya, silahkan ikuti langkah-langkah berikut ini.

  1. Mempersiapkan jenis font baru yang akan dipasang. Anda bisa download diinternet atau coba cari font yang ada dikomputer anda.
  2. Kemudian kita buka alamat http://cufon.shoqolate.com/generate/
  3. Kik kanan pada menu Download, lalu pilih save as link. Simpan ke komputer anda.
    jenis font unik dan keren untuk blog
  4. Kemudian masukkan font dari komputer anda yang sudah disiapkan (seperti point 1)
    jenis font unik dan keren untuk blog
  5. Lanjutkan mengisi, seperti tanda lingkaran merah (yang lain opsional boleh diabaikan)
    jenis font unik dan keren untuk blog
  6. Kemudian contreng seperti gambar dan tekan lets do this, tunggu sampai muncul windows untuk menyimpan hasil font yang dibuat.
    jenis font unik dan keren untuk blog
  7. Berarti sekarang kita sudah punya dua buah file, 1 file cufon-yui.js sama file yang barusan kita download.
    jenis font unik dan keren untuk blog
  8. Setelah itu kirim dua file tersebut ke server web atau blog anda. Jika anda pengguna blogger (tidak punya server sendiri) terpaksa nebeng ke server teman.
  9. Kemudian kita modifikasi template dengan menambahkan beberapa baris berikut dalam bagian <head>..</head>
    Kodenya :
    <script type="text/javascript" src="cufon-yui.js"></script>  
    <script type="text/javascript"  src="nama-file-anda.font.js"></script>
    
    <script type="text/javascript">  
        Cufon.replace('h1, h2, h3, p');
    </script>
    Jika alamat file berada dalam sebuah folder, tambahkan nama folder dibagian depan nama file masing-masing misal : js/cufon-yui.js, jika berada diserver lain, ketikkan alamatnya misal : http://www.teman.com/js/cufon-yui.js
    Pada perintah Cufon.replace, tentukan tag html mana saya yang akan dirubah contoh diatas font yang berubah adalah heading 1, heading 2, heading 3 dan paragraf dengan dipisah menggunakan tanda koma.
  10. Simpan kembali template anda, dan coba ditampilkan.

Jika ada pertanyaan jangan sungkan untuk kirim komen. Jika ini membantu anda silahkan share ke teman anda.

Lebih detail bisa liat artikel aslinya : http://fearlessflyer.com/2009/10/cufonize-your-pages-how-to-add-cufon-to-your-web-design/

Kalo mau liat contohnya bisa diliat web saya ini (bagian judul kolom kategori dan judul artikel), atau lihat http://spyrestudios.com/cufon-font-replacement/

Semoga bermanfaat.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • Software WYSIWYG Editor untuk pembuatan halaman web
    WYSIWYG cenderung identik dengan sebuah program aplikasi visual yang digunakan untuk membuat/menuliskan kode program atau dokumen yang berisi rangkaian perintah-perintah yang hanya akan muncul setelah dijalankan dengan bantuan program lain seperti browser
  • Membuat menu dengan icon seperti akun google
    Membuat menu seperti akun google. Yang punya akun google pasti sudah kenal tampilan menu seperti disamping ini. Jika anda sudah masuk ke layanan akun google, dan masuk ke menu produk maka akan terlihat menu layanan yang anda gunakan dalam bentuk daftar nama layanan serta ikon gambar kecil disampingnya.
  • Mengatur format tulisan dalam dreamweaver
    Mungkin masih ada yang bingung cara pengoperasian serta fungsi property bar untuk tulisan yang ada pada dreamweaver. Pada tutorial berikut ini saya akan menjelaskan langkah-langkah untuk membuat tulisan serta cara mengaturnya dengan dreamweaver.
  • Template website gratis
    Template website gratis. Sekarang anda tidak perlu merepotkan diri untuk menyusun template website atau blog, karena sudah banyak template yang bisa anda dapat dengan gratis alias free. Kecuali anda memang ingin template web yang fresh, original, dan sesuai dengan web atau blog yang anda buat.
  • Membuat form dengan dreamweaver
    Membuat form dengan dreamweaver. Anda yang sudah terbiasa membuat form dengan aplikasi bukan visual (murni mengetik html), sepertinya perlu mempertimbangkan kembali dari segi efektifitas waktu membuat koding form. Karena banyak sekali pilihan aplikasi yang sudah tersedia lengkap dengan fitur-fitur super praktis yang dapat membantu kita menyelesaikan pekerjaan dengan mudah dan cepat, salah satunya adalah dreamweaver.

Kiriman terbaru