Cara Menggunakan/Memasang Custom Font di Blogger

cara mengganti custom fonts
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.

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.
Contoh kode dengan tag link untuk jenis template XML seperti Blogger:
<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.

add a comment 55 Comment(s):

Muhammad Rizki said...

pertamax, artikel yang top, dengan penjelesan yang sangat jelas dan menarik. usahakan kunjung balik ya!

Ahmad Khoirul Azmi said...

yup, terima kasih @Rizki.

Yuyut Wahyudi said...

Nyimak.... *tapi masih belum paham*

SEO | Computer said...

Sip pak, menjadikan blog lebih warna warni.

Fiola Fashionhits said...

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.

dede said...

wahhh bolehhh dicoba!!
makasih atas infonya!!
:)

Rudy Hartono said...

blogwalking, salam kenal

Lowongan Kerja Semarang 2012 said...

Sangat bermanfaat mas. gak perlu pakek javascript buat manggil tu font. Salam hangat dari blogger newbie

sampeweweh said...

mantap bang saya sudah masang lewat tutorial ini hehe

Mayya said...

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!

Ahmad Khoirul Azmi said...

@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 /.

ZonaBlog2 said...

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 ??

Darma Jaya said...

wah sangat menarik! izin copaz ya mas..

darmasite.blogspot.com

Rudy Pengelana said...

mampir yuk ;.....
http://yuga09.blogspot.com/

Shinigami said...

wah, akhirnya ketemu juga

bagus nih buat tema blog jadi tambah mantab

dokunimus said...

Lumayan lengkap dari manual samapi memakai fitur blogger.

r1zi said...

Ini nih yang lagi saya cari2... matur nuwun...

Ardhian said...

Wuihh...Nice artikel gan..
mantap..sudah ane terapin dan sukses...

Terimaksih artikelnya ya gan..:D

awp said...

bah...keren uy...

Remo-XP said...

Wah ketahuan copas dari blog saya nih orang..

Idrus dama said...

SALAM KENAL YAA.!! www.idrusdama.co.cc

Putri Retno Miranti said...

aku nyoba kok gak kenaa ya? tetp.. itu masukinnya di htmltemplate kan?

Putra patiwara said...

Check Blog Sya Ya mAs Bro ' bnyak infp-info blog yang perlu anda ketahui .
CHECK TKP ??? http://putrapatiwara.blogspot.com/
THN'S

Putra patiwara said...

Check Blog Sya Ya mAs Bro ' bnyak infp-info blog yang perlu anda ketahui .
CHECK TKP ??? http://putrapatiwara.blogspot.com/
THN'S

Pri Budi Laksono said...

makasih ya sob , infonya moga tambah pinter az

Share With Agung Talaga said...

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.....

Ahmad Khoirul Azmi said...

Saya check barusan sudah berubah yang di posting, berarti sudah ketemu ya :)

endy manaloe said...

sangat bermanfaat nie..
tks ya masukan nya..

endy manaloe said...

mas kasih masukan donk tuk blog saya..
apa yg kurang gt..

maklum mas..
masih baru blajar..

butuh bimbingan dari yang sudah pakarnya..
hehehe...

Ahmad Khoirul Azmi said...

@ENDY:Oke insya Allah nanti saya mampir.

Girly La Moda said...

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 :)

Rizal Surya said...

wah. bener bener berguna nih

akhyar said...

wowww....
sangat bermanfaat....
thank's banget........

Laras Transportindo said...

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.

FicarDean said...

Thank banyak mas...
Ini yg gue cari..Blog saya keliatan jadul banget pake font times new roman

aank budi santoso said...

salam berbagi boz maksih ilmunya moga bermanfaat bagi orang banyak

admin said...

infonya mantep salam
www.gunung-air.com

FXVV said...

kalo untuk pasang template blog custom gimana yaa caranya mas bro

ky-ky said...

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

dealer honda semarang said...

Cara simple dan mudah untuk merubah tulisan dan warna tulisan

Diyah Hafshah said...

kalau masnya ini pke font apa ya?

Ahmad Khoirul Azmi said...

@Diyah: Kalo font umumnya saya cuma pake font normal saja: arial.
Kalo contoh di paragraf paling atas, itu pake google font: Sail

Ichwan hausgame said...

keren masbro..yang mana ya yang paling disarankan,,biar ga berat, tolong dibalas :)

Annur Diana said...

gitu ya

Rumaina Saliem said...

Makasih infonya ya.
Klo mau cari kerja, aq punya solusi nya

Arifyn Syams said...

thanks sob sudah membantu
kunjungan baliknya sob....??
disini
http://mas-arwaf.blogspot.com/

Izzuddin Fawwaz said...

Posting bagus gan..

Ari Pratama said...

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.,.. :)

Ahmad Khoirul Azmi said...

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.

David Syam said...

Terima kasih gan, penggunaan warna black menjadi tampilan blog menjadi lebih elegan. nice post.

Potal nfo said...

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

Ahmad Khoirul Azmi said...

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,

Hanna Akira said...

mas, caranya kalau cuma ganti font yang judul blog gmna ya? mohon pencerahan, masih belajar soalnya q,, hehe
http://inibloggokil.blogspot.com/

Ahmad Khoirul Azmi said...

@hanna: cari .post h1 atau .post h2 atau .post h3, kemudian sisipkan font di dalam css nya

Red Envolt said...

saya coba masih belum berhasil mas *newbie*

thanks b4 :)

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap