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

  • Kombinasi warna dalam desain website
    Kombinasi warna pada desain website adalah salah satu komponen yang sangat penting. Seorang desainer yang sudah memiliki "jam terbang" cukup tinggi sangat mengetahui pentingnya kombinasi warna dan hati-hati dalam memilih warna. Akan tetapi, hal ini tentu sangat berbeda bagi mereka yang baru terjun dalam masalah desain. Warna apa yang cocok untuk website tertentu, bagaimana membuat kombinasi dari beberapa warna agar sesuai dengan tema yang dibuat, adalah sebagian dari banyak masalah warna.
  • Membuat tabel dengan dreamweaver
    Dreamweaver menyediakan fasilitas yang sangat mudah dalam membantu para web desainer untuk menerapkan kreatifitasnya dalam hal desain visual halaman web termasuk penyusunan tabel dalam berbagai bentuk. Bagi anda yang baru mulai belajar dengan dreamweaver mungkin perlu baca tutorial berikut. Saya akan berbagi tentang bagaimana membuat tabel 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.
  • Mengedit gambar dengan Adobe Dreamweaver CS3
    Mengedit gambar dengan Adobe Dreamweaver CS3. Tahukah anda bahwa Adobe Dreamweaver selain digunakan untuk menyusun layout halaman web dan menuliskan kode program berbasis web, juga bisa digunakan untuk mengedit gambar yang disisipkan dalam halaman web tersebut. Simak caranya berikut.
  • 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.

Kiriman terbaru