Cara Menggunakan/Memasang Custom Font di Blogger
Custom Fonts adalah, singkatnya, font-font khusus yg ditambahkan secara individual & bukan merupakan font-font default yg telah dikenal browser (database-nya tidak dimiliki browser). Custom fonts saat ini telah berjumlah ratusan, memiliki variasi yg bermacam-macam, unik, memiliki tema yg lebih khas daripada font biasa, serta dapat meningkatkan kualitas tampilan blog/web.
Tulisan di atas memberikan kesan yg berbeda; lebih stylish dibanding font default di sekelilingnya. Pada posting Cara Mengubah/Mengganti jenis font di Blogger, Buka Rahasia Blogspot telah share cara mengganti font dengan menggunakan standar. Sebagai langkah advance, Buka Rahasia Blogspot akan share cara menggunakan & mengganti font Blog dengan Custom Fonts bagi sobat blogger yg tertarik untuk membuat font di blog tampak lebih stylish. Di platform Blogger, ada dua cara yg dapat digunakan untuk menggunakan/menampilkan Custom Fonts:
1. Menggunakan fitur Blogger Web Fonts melalui Template Designer.
2. Memasukkan snippets (kode) secara langsung melalui Edit HTML (manual template editing).
Cara Menggunakan Blogger Custom/Web Fonts Melalui Template Designer
Pada akhir Desember 2010, Blogger memperkenalkan fitur Web Fonts yg dapat diakses melalui Template Designer. Saat ini setidaknya telah ada 77 Web Fonts (dan terus bertambah) yg dapat digunakan untuk kostumisasi font blog Blogger guna memperindah desain blog.
Cara mengakses fitur Web Fonts:
1. Masuk Dashboard Blogger > Template > Customize > Advanced
2. Pada halaman Template Designer, setelah memilih "Advance", sobat dapat memilih bagian mana yg hendak dikostumisasi, misalnya page, header, sidebar header, post title, dan seterusnya. Kemudian pilih Web Fonts yg hendak digunakan.
3. Setelah semua kostumisasi font selesai, klik "Apply to This Blog".
Dengan cara ini, sobat dapat memilih Web Fonts yg telah disediakan oleh Blogger serta mempreviewnya sekaligus (WYSIWYG).
Note: Pengaturan Custom web fonts melalui "template designer" belum tentu dapat diaplikasikan pada custom blogger templates (bukan template bawaan Blogger). Jadi harus menggunakan cara kedua di bawah.
Note: Pengaturan Custom web fonts melalui "template designer" belum tentu dapat diaplikasikan pada custom blogger templates (bukan template bawaan Blogger). Jadi harus menggunakan cara kedua di bawah.
Cara Memasang Custom Fonts Dengan Mengedit Template Blog
Konsep sebenarnya dari memasang custom fonts adalah memasukkan font snippets pada template & merujukkannya pada font family dalam atribut pengaturan CSS elemen blog. Dibanding Blogger Web Fonts pada Template Designer yg jumlahnya masih terbatas, variasi Web Fonts gratis yg tersedia jauh lebih banyak. Kali ini, kita akan menggunakan Web Fonts milik Google (Google Font API), yg sampai saat ini telah memiliki koleksi 397 Font Family (dan terus bertambah), karena memiliki akses yg cepat & stabil.
Tahap 1: Instalasi Font Ke Blog
1. Masuk ke Google Web Fonts
2. Klik "start choosing fonts", cari font yg diinginkan, kemudian klik "quick use".
4. Pada halaman berikutnya, lakukan kostumisasi (jika font memiliki varian), lalu scroll ke bawah hingga kolom kode. Copy code tersebut.
<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"/>
Contoh kode dengan tag link untuk jenis plain HTML pada template web biasa:
<link href="http://fonts.googleapis.com/css?family=Sail" rel="stylesheet" type="text/css"></link>
5. Buka Edit Template/Edit HTML.
6. Letakkan kode tersebut dalam tag <head>, tepatnya di antara <head> & </head>, atau agar lebih cepat diload, letakkan di bawah/dekat dengan <head>. Boleh juga di atas </head>.
Tahap 2: Aplikasi Custom Font Ke Elemen Blog Melalui CSS
1.Guna mengubah tampilan font pada elemen tertentu (judul posting, nama blog, isi posting, judul sidebar, dsb), yg perlu dicari adalah class atau id CSS yg mengaturnya. Sebagai contoh jika ingin mengganti font link judul posting, maka cari class/id yg mengatur judul posting, misalnya .post h3 a.
2. Cari atribut yg mengatur font. Atribut pengatur font pada CSS biasanya ada dua yg digunakan pada template, font-family atau font saja. Jika sudah ada, cukup tambahkan nama font, setelah font-family atau font. Contoh pengaturan custom font pada font isi posting:
.post-body {font-family:'Custom Font', Times New Roman, Trebuchet, Serif; margin:......dst}
Ada dua poin penting yg mesti diperhatikan:
a. Font default diletakkan di awal serta harus dibubuhkan tanda kutip (boleh single ['] atau pun double ["]).
b. Gunakan font-font pengganti di belakang font default untuk berjaga-jaga apabila Browser gagal merender/memuat font tersebut.
Note: Jika masih kurang jelas, silahkan mempelajari CSS font pada posting Cara Mengubah/Mengganti jenis font di Blogger.
3. Setelah selesai melakukan editing pada CSS, preview terlebih dahulu. Apabila sudah beres sesuai yg diinginkan, Save Template.
Important!:
1. Jangan gunakan/pasang snippet font yg tidak dibutuhkan & jangan menggunakan custom fonts yg terlalu banyak jenisnya. Penggunaan snippet custom font (link tag) menyebabkan terjadinya proses rendering oleh browser sehingga mempengaruhi loading halaman blog (blog lebih berat, loading lebih lama).
2. Apabila Custom Font yg dibutuhkan hanya pada bagian kecil saja, misalnya text logo pada header blog, lebih baik gunakan gambar text. Buat dengan online text logo creator/generator.
Yup, demikian share saya mengenai cara memasang custom fonts di Blogger & sedikit review mengenai penggunaan web fonts pada blog. Have a Nice Blogging * Happy Designing!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
Cara Menggunakan/Memasang Custom Font di Blogger
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.
pertamax, artikel yang top, dengan penjelesan yang sangat jelas dan menarik. usahakan kunjung balik ya!
yup, terima kasih @Rizki.
Nyimak.... *tapi masih belum paham*
Sip pak, menjadikan blog lebih warna warni.
mas..makasih banyak infonya.. benar-benar kursus singkat blog yang bermanfaat. udah lama mau bikin blog untuk shop tapi bener ga ngerti. mudah-mudahan diijinkan untuk co-pas kode css n html..maaaf ya. makasih banyak.
wahhh bolehhh dicoba!!
makasih atas infonya!!
:)
blogwalking, salam kenal
Sangat bermanfaat mas. gak perlu pakek javascript buat manggil tu font. Salam hangat dari blogger newbie
mantap bang saya sudah masang lewat tutorial ini hehe
Salam kenal...
Kebetulan memang sedang nyari tutorial ini nih...makasih yaaaaa...
Udah dicoba, ternyata error.
Bolak-balik sana-sini, nemu deh salahnya dimana:
1. Ketika ngopi kode dari Google Web Fonts, tanda ' diganti menjadi "
2. Masih kode yang sama, pada kode : type="text/css">
seharusnya menjadi : type="text/css"/>
And, it works!
@Mayya:
Iya benar. Tag link pada Blogger adalah dengan single tag karena merupakan XML, jadi harus diakhiri dengan tanda / di belakangnya.
Kalo tanda " di dalam edit HTML Blogger tidak perlu diganti tidak masalah. Karena ketika di save, Blogger otomatis akan melakukan parsing dan mengubahnya menjadi '. Terima kasih buat informasinya, saya jadi ingat lupa mengakhiri tag XML dengan /.
Mas, gimana sih caranya bikin font yang keren ? soalnya ketika saya mencari ilmu tentang blog nih ketemu amak blog yang font nya keren banget ? gimana sih caranya bikin font itu ??
wah sangat menarik! izin copaz ya mas..
darmasite.blogspot.com
wah, akhirnya ketemu juga
bagus nih buat tema blog jadi tambah mantab
Lumayan lengkap dari manual samapi memakai fitur blogger.
Ini nih yang lagi saya cari2... matur nuwun...
Wuihh...Nice artikel gan..
mantap..sudah ane terapin dan sukses...
Terimaksih artikelnya ya gan..:D
bah...keren uy...
Wah ketahuan copas dari blog saya nih orang..
SALAM KENAL YAA.!! www.idrusdama.co.cc
aku nyoba kok gak kenaa ya? tetp.. itu masukinnya di htmltemplate kan?
Check Blog Sya Ya mAs Bro ' bnyak infp-info blog yang perlu anda ketahui .
CHECK TKP ??? http://putrapatiwara.blogspot.com/
THN'S
Check Blog Sya Ya mAs Bro ' bnyak infp-info blog yang perlu anda ketahui .
CHECK TKP ??? http://putrapatiwara.blogspot.com/
THN'S
makasih ya sob , infonya moga tambah pinter az
Saya coba ganti font pada blog saya tapi tinggal bagian postingan aja yg tidak bisa diganti. Saya sdh otak atik otak kode CSS blog saya tapi tetap nda berubah jenis font pada bagian postingan blog saya. Kalo ada waktunya, bisa lihatkan dulu kode mana yg pa untuk merubah jenis font pada postingan blogq. Coz nda serasi juga. Yg lainnya sdh berubah jenis fontnya and tinggal bagian postingannya yg belu. Saya sdh coba secara manual yaitu saya edit ulang artikel saya tapi repot juga kalo diedit dari catatan pertama sampai sekarang yg jumlahnya sdh ratusan... Minta tolong ya.....
Saya check barusan sudah berubah yang di posting, berarti sudah ketemu ya :)
sangat bermanfaat nie..
tks ya masukan nya..
mas kasih masukan donk tuk blog saya..
apa yg kurang gt..
maklum mas..
masih baru blajar..
butuh bimbingan dari yang sudah pakarnya..
hehehe...
@ENDY:Oke insya Allah nanti saya mampir.
wahh, penjelasannya detail sekali, sehingga sekali baca saya langsung mengerti Mas,,
Tapi font2 custom yang bisa digunakan hanya yang ada di Google Web Fonts sajakah? karena saya memiliki font yang saya ingin sendiri,, (dari dafont.com).. bagaimana ya mas caranya?
Mohon petunjuknya Mas :)
wah. bener bener berguna nih
wowww....
sangat bermanfaat....
thank's banget........
Terima kasih mas Ahmad Khoirul,ini sangat berguna bagi saya yg seorang pemula,kemudian bagaimana caranya untuk mengisi menu menu tersebut?mohon penjelasanny lebih lanjut.
Thank banyak mas...
Ini yg gue cari..Blog saya keliatan jadul banget pake font times new roman
salam berbagi boz maksih ilmunya moga bermanfaat bagi orang banyak
infonya mantep salam
www.gunung-air.com
kalo untuk pasang template blog custom gimana yaa caranya mas bro
gan.. judul bawaan dr blog bs ikut ilang gk gan? soalnya judul bawaankan gk bs di ilangin secara manual, waktu itu ane pake cooltext.com gk bs ilang gan, masa jd nimbul 2 judul. tlng pencerahannya gan maklum msh newbie.. hehehe txs gan
Cara simple dan mudah untuk merubah tulisan dan warna tulisan
kalau masnya ini pke font apa ya?
@Diyah: Kalo font umumnya saya cuma pake font normal saja: arial.
Kalo contoh di paragraf paling atas, itu pake google font: Sail
keren masbro..yang mana ya yang paling disarankan,,biar ga berat, tolong dibalas :)
gitu ya
Makasih infonya ya.
Klo mau cari kerja, aq punya solusi nya
thanks sob sudah membantu
kunjungan baliknya sob....??
disini
http://mas-arwaf.blogspot.com/
Posting bagus gan..
Bang, mau tanya dikit, kalau misal saya ada 3 font yang mau dipakai, tapi hanya memakai 1 link css apakah dihitung nya tetap 3 link atau 1 ya? contohnya seperti gini -->'http://fonts.googleapis.com/css?family=Open+Sans|Bree+Serif|Audiowide' rel='stylesheet'..
Mohon jawabannya ya.,.. :)
Dipisah saja satu-satu, jangan dijadikan satu. Kalo dalam satu tag tidak bisa dibaca.
<link....
<link....
<link...
Tapi ingat menggunakan custom font cukup memakan beban load, jadi pertimbangkan penggunaan yang efektif, masing-masing jenis font punya beban berbeda-beda.
Terima kasih gan, penggunaan warna black menjadi tampilan blog menjadi lebih elegan. nice post.
gan, mau tanya neh..
kenapa ya blog saya judul postingannnya kalau fontnya di perbesar kok judulnya yang muncul gak full/kepotong ya? saya udah coba utak-atik codenya + cari tutorialnya di google tapi belum bisa juga..
untuk lebih jelasnya ada di link gambar di bawah ini:
http://s11.postimg.org/e63626643/post.jpg
tolong bantuannya ya, code mana yang mesti saya edit..
terima kasih
Anda harus mengatur tinggi bagian judul sehingga ruang untuk judul lebih tinggi, saya tidak tahu apa selector CSS judul di template anda karena tidak tahu blog anda, tapi kira-kira cari bagian post title dan tambah tingginya,
mas, caranya kalau cuma ganti font yang judul blog gmna ya? mohon pencerahan, masih belajar soalnya q,, hehe
http://inibloggokil.blogspot.com/
@hanna: cari .post h1 atau .post h2 atau .post h3, kemudian sisipkan font di dalam css nya
saya coba masih belum berhasil mas *newbie*
thanks b4 :)
Post a Comment