Langsung aja yah, berikut urutan untuk mengaplikasikan Custom Fonts dari Google Web Fonts ke Blog:
- Kunjungi Google Fonts (http://www.google.com/fonts/).
- Nanti akan terlihat banyaknya tampilan font yang bisa kita gunakan untuk Blog. Scroll saja ke bawah untuk melihat-lihat font lainnya. Jika font yang diinginkan atau sudah cocok dengan pilihan kita, klik Quick-use.
Screen shoot dari Quick-use:
- Setelah kita sudah mengklik Quick-use, akan muncul satu halaman untuk melakukan penyesuaian, antara lain:
- Choose the styles you want
Opsi ini di gunakan untuk memilih style yang kita inginkan. Pilih saja.
- Choose the character sets you want
Opsi ini di gunakan untuk memilih character set yang kita inginkan. Pilih saja.
- Add this code to your website
Opsi ini di memberitahukan bahwa kode yang ada pada opsi ini harus ditambahkan pada template.
- Integrate the fonts into your CSS.
Opsi ini di memberitahukan cara mengaplikasikannya pada kode CSSnya.
- Choose the styles you want
Sekarang cara penerapannya pada template XML blog:
- Login ke akun Blogger.
- Lalu langsung menuju ke edit Template.
- Paste kode pada opsi Add this code to your website di antara tag <head> dan </head> pada template. Kali ini opsi standard saja yang di pakai.
- Untuk menerapkan Custom Font pada elemen tertentu (misalnya teks dari dokumen), yang perlu di cari adalah VARIABEL yang mengaturnya itu.
Sebagai contoh di template saya VARIABEL untuk mengatur font untuk teks dari dokumen seperti berikut:
<Variable name="body.font" description="Font" type="font" default="normal normal 13px 'Di_Sini_Nama_Custom_Font_Yang_Dipilih', Arial, Serif" value="normal normal 13px 'Di_Sini_Nama_Custom_Font_Yang_Dipilih', Arial, Serif"/>
Ganti Di_Sini_Nama_Custom_Font_Yang_Dipilih dengan nama font yang tertera pada opsi Integrate the fonts into your CSS. Misalnya di opsi Integrate the fonts into your CSS terlihat seperti gambar berikut:
Maka VARIABEL di atas akan menjadi seperti:
<Variable name="body.font" description="Font" type="font" default="normal normal 13px 'Fauna One', Arial, Serif" value="normal normal 13px 'Fauna One', Arial, Serif"/>
Begitu juga sama untuk pengaturan-pengaturan lainnya.
- Selesai.
