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
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!
Post a Comment