Cara Menggunakan Google Fonts pada Template Blogger

Menggunakan Google Fonts adalah hal biasa yang sering dilakukan oleh Web Designer maupun Web Developer. Penggunaan Google Fonts ini memang lebih dipilih daripada menaruh font di hosting sendiri, baik karena kemudahan dari pemeliharaan dan pengaturannya.

Banyak dijumpai para pembuat template Blogger terkendala saat menyalin kode sematan dari Google Fonts. Sering munculnya peringatan galat dari editor template Blogger. Mengapa hal ini terjadi?

Bukan salah Google Fonts membagikan kodenya, namun harus diketahui bahwa bahasa pemrograman yang digunakan template Blogger itu berbasis XML. Apa bedanya dengan HTML? Secara umum, tidak ada banyak perbedaan. Namun, dalam setiap tag XML harus ada penutupnya; berbeda dengan HTML.

Berikut ini adalah langkah-langkah cara menggunakan Google Fonts pada Template Blogger.

Langkah-langkah Menggunakan Google Fonts

Pertama-tama, bukalah situs Google Fonts. Berikut ini adalah tampilan situs Google Fonts.

Pilih Font yang cocok dan akan kamu gunakan nantinya. Klik "Add to Collection" untuk memilihnya.

Setelah itu perhatikan di bagian bawah kanan. Klik "Use" untuk menggunakan Google Font tersebut.

Secara otomatis kamu akan dibawa ke halaman Page Load Font yang akan kamu pakai.

Halaman Page Load ini digunakan untuk mengetahui berat Font yang akan dipakai. Untuk Font Ribeye adalah 21 KB, ini tergolong lumayan. Semakin kecil ukuran Page Load Font, maka semakin direkomendasikan untuk dipakai.

Setelah itu, lakukan gulir ke bawah. Kamu akan menemukan tampilan semacam di bawah ini.

Salin kode yang diberikan Google Fonts ke template Blogger milikmu. Nah, di sini lah letak permasalahan yang sering dialami oleh pembuat template Blogger yang hendak memasang Google Fonts. Umumnya, pembuat template Blogger akan menyalin kode tersebut mentah-mentah seperti di bawah ini.

<link href='http://fonts.googleapis.com/css?family=Ribeye' rel='stylesheet' type='text/css'>

Apa yang terjadi apabila kamu menyalinnya seperti kode di atas? Di bawah ini adalah contoh galat yang muncul akibat kesalahan menyalin kode.

Mengapa hal ini terjadi? Seperti yang saya jelaskan di paragraf sebelumnya; Blogger menggunakan XML, yang tentu saja sedikit berbeda dengan HTML perihal aturan pengkodeannya. Lantas harus bagaimana? Tambahkan "/" saja sebelumnya tanda ">"; maka galat tersebut akan terselesaikan.

<link href='http://fonts.googleapis.com/css?family=Ribeye' rel='stylesheet' type='text/css'/>

Berikut ini adalah hasilnya apabila telah ditambah dengan "/".

Tidak ada pemberitahuan galat lagi. Lalu selanjutnya apa lagi? Jika kamu ingin menggunakan Font tersebut pada H1 (Judul Blog), tambahkan pada kode CSS yang berada di daerah <b:skin>...</b:skin>.

#header h1 { font-family: 'Ribeye', cursive; }

Mudah bukan? Selamat mencoba :)