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~
Posting Komentar