NEWS
Loading...
  • Posted by : Johanes Djogan 26 Feb 2012

    Tips & Trik Mudah memasang cufon font pada blog



    Apa kabar sobat,kali ini saya mau sharing tips dan trik cara memasang @font face atau biasa disebut cufon font seperti template blogger saya Retropop v2 atau blog saya sendiri.mungkin banyak dari kalian yang mungkin agak kesulitan saat menggunakan font ini.harus uploadlah,inilah itulah,tapi disini saya akan kasih trik mudah'a menggunakan cufon font.

    tapi sebelum trik,saya jelaskan dulu tipsnya.

    Tips menggunakan Cufon font
    -Saya Sarankan jangan menggunakan cufont lebih dari 2 jenis font.
    -Terapkan cufon font HANYA pada Header text.misal judul blog,judul posting,judul sidebar,dan Readmore.
    -Jangan terapkan cufon font pada seluruh halaman blog.
    -Sebaiknya upload font pada hosting local / hosting yang koneksinya cepat dan lancar seperti https://sites.google.com/

    ini kumpulan JS milik saya
    https://sites.google.com/site/djogzs/js

    keunggulan menggunakan cufon font yaitu:
    -Text lebih jelas
    -Tipografi sangat sempurna
    -Text'a tidak dapat di copy paste seperti text biasa karena menggunakan elemen HTML <canvas> .
    -Tipe/style font bisa kamu dapatkan darimana saja.
    -Hampir Mendukung semua browser
    -Mudah digunakan/diterapkan sama seperti google font.

    Kekurangan menggunakan Cufon font yaitu:
    -Koneksi internet harus cukup cepat.
    -Agak berat saat pertama kali loading/rendering font.

    Kalau udah mengerti,langsung saja saya kasih triknya nih :)

    Triknya yaitu,sobat tidak perlu mengunjungi http://cufon.shoqolate.com/generate/ yang cara'a agak rumit karena banyak pengaturanya,harus cari" font'a dululah,upload,convert font TTF,OTF menjadi cufonfont dan sebagainya.

    kamu cukup mengunjungi web yang sudah menyediakan file cufon font untuk langsung digunakan.
    web yang saya rekomendasikan: http://www.cufonfonts.com




    Setelah itu,kamu akan melihat diweb itu sudah tersedia macam" variasi font yang menarik seperti pada contoh diatas,kamu pilih salah satu lalu klik "CUFON FILE DOWNLOAD"






    lalu,kamu akan melihat tipe font dan Character Set font'a.gunakan saja sesuai keperluan.setelah itu scroll ke halaman yang paling bawah


    misalkan saya memlih tipe font Titillium


    Klik "FONT DOWNLOAD AS CUFON"
    Setelah itu simpan file cufonnya ke dekstop.

    Selanjutnya kamu upload fontnya.(misal di https://sites.google.com/)
    Setelah itu Copas semua Javascript'a seperti gambar diatas.

    lalu,sobat login ke blogger - Rancangan - Edit HTML.
    paste semua script tadi di bawah code ]]></b:skin>

    Setelah itu jangan disimpan dahulu ya ==v

    pertama,kamu perhatikan script yang seperti dibawah ini:
    <script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript"></script>
    <script src="titillium-text.cufonfonts.js" type="text/javascript"></script>

    http://cufon.shoqolate.com/js/cufon-yui.js

    alamat link diatas diganti dengan milik saya,karena sudah diupload ke sites.google
    https://sites.google.com/site/djogzs/js/cufon-yui.js

    Js diatas ini sangat penting agar cufont font dapat diterapkan

    titillium-text.cufonfonts.js

    Diganti dengan Url cufon yang tadi kamu upload


    Kemudian,perhatikan js dibawah ini:

    <script type="text/javascript">
    Cufon.replace('.titilliumtext22l_thin', { fontFamily: 'TitilliumText22L-Thin', hover: true });
    Cufon.replace('.titilliumtext22l_light', { fontFamily: 'TitilliumText22L-Light', hover: true });
    Cufon.replace('.titilliumtext22l_regular', { fontFamily: 'TitilliumText22L-Regular', hover: true });
    Cufon.replace('.titilliumtext22l_medium', { fontFamily: 'TitilliumText22L-Medium', hover: true });
    Cufon.replace('.titilliumtext22l_bold', { fontFamily: 'TitilliumText22L-Bold', hover: true });
    Cufon.replace('.titilliumtext22l_xbold', { fontFamily: 'TitilliumText22L-XBold', hover: true });
    </script>


    Disini menurut saya kita gunakan tipe font yang normal saja,jadi yang lain kita hapus saja menjadi seperti ini:

    <script type="text/javascript">
    Cufon.replace('.titilliumtext22l_regular', { fontFamily: 'TitilliumText22L-Regular', hover: true })
    </script>

    (Tiap font berbeda",ada yang tipe'a cuma 1 ada juga yang banyak (bold,light,thin,dan sebagai'a)
    Setelah itu,perhatikan text diatas yang saya beri warna merah.

    .titilliumtext22l_regular diganti dengan Css yang akan kamu ganti font'a.

    Misalkan kita mau menggantinya untuk judul blog yg css'a #Header1 (tiap blog css'a bisa berbeda)

    kita ganti menjadi seperti ini:

    <script type="text/javascript">
    Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });

    </script>

    Setelah itu sobat simpan.
    atau yang ga mau ribet,coba tes script ini dari tutorial diatas.

    <script src="https://sites.google.com/site/djogzs/js/cufon-yui.js" type="text/javascript"></script>
    <script src="https://sites.google.com/site/djogzs/js/titillium-text.cufonfonts.js" type="text/javascript"></script>
    <script type="text/javascript">
    Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });

    </script>


    Setelah itu simpan dan lihat hasilnya.
    Bila berhasil,kita masuk ketahap tambahan~xDD
    tadi sudah berhasil mengganti judul blog.lalu bagaimana cara menerapkan font'a ke text lainya?mudah saja,copy paste script css dibawahnya.
    misal:


    <script type="text/javascript">
    Cufon.replace('#Header1', { fontFamily: 'TitilliumText22L-Regular', hover: true });
    Cufon.replace('#HTML1 h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
    Cufon.replace('#Profile1 h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
    Cufon.replace('#post-header h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });
    Cufon.replace('#sidebar h2', { fontFamily: 'TitilliumText22L-Regular', hover: true });

    dan seterusnya.....

    </script>





    CONTOH CUFON DARI TUTORIAL DIATAS

    SUCCESS :)

    Selesai deh,simple bukan? ga terlalu ribet" banget.saya udah jelasin sedetail mungkin tuh~xDD
    sebelum dan sesudah,maaf kalau da kata" yang kurang jelas atau emang gajelas ==v #Plakk
    selamat mencoba,happy coding and semoga bermanfaat.Arigatou Gozaimasu~








    { 11 comments... read them below or Comment }

    1. petamaxx.. :)
      thanks infonya.. :))
      nice bangetss..

      BalasHapus
    2. Nice Tips n Trik :D

      Berkarya trus mas Anes !!

      BalasHapus
    3. Mantap dah, tpi ane gk biosa apa2 wekekkeke
      lg ujikom d bengekel huhuuu

      BalasHapus
    4. izin comentar :) visi me n comment me back .

      BalasHapus
    5. owh begitu ya, saya malah belum pernah pake cufon-2 gini. hhmm kalo dilihat sih gak bisa gunakan macam-2 cufon yg banyak ya? thanks info nya :)

      BalasHapus
    6. Komentar ini telah dihapus oleh pengarang.

      BalasHapus
    7. wih...... ijin coba gan..
      nice info.. (y)

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -