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