Arial, Tahoma, atau Georgia adalah beberapa jenis huruf (font family) yang umum kita temukan di blog atau website. Huruf-huruf tersebut termasuk kelompok web safe fonts atau jenis huruf yang bisa dipastikan dapat dibaca (di-render) oleh semua broswer pada sistem operasi yang berbeda-beda.
Pada salah satu artikel di webdesigndev.com Anda akan menemukan 13 jenis huruf web safe fonts lainnya yang barangkali belum pernah Anda coba. Adapun uraian lebih lengkap mengenai penggunaan web safe fonts ini dapat Anda lihat di w3schools.
Jika kebetulan Anda tidak puas dengan jenis-jenis font di atas, maka tidak ada salahnya Anda mencoba font-font dari Google Web Fonts. Semua jenis font pada layanan Google ini bersifat open source, sehingga bisa dengan bebas Anda gunakan.
Pada saat posting ini dibuat, ada 302 jenis huruf yang bisa Anda gunakan di Google Web Fonts dan angka ini akan terus bertambah seiring dengan masuknya jenis-jenis font karya typo-designers lainnya.
Silakan lihat live preview penggunaan font dari Google ini di salah satu blog teman saya, jomantara.com!
Memilih Jenis Font di Google Web Fonts
Setelah Anda berada di halaman utama Google Web Fonts, klik Start choosing fonts dan sesaat kemudian Anda akan disuguhi daftar beserta live preview dari masing-masing font.
Pada bagian ini, Anda bisa menggunakan teks/kalimat Anda sendiri dengan menginputkan teks pada bagian A. Anda juga bisa melihat bagaimana font-font tersebut ditampilkan dengan ukuran (font size) berbeda dengan melakukan pengaturan pada bagian B (perhatikan kembali gambar sebelumnya!).
Selanjutnya, cari jenis font yang menurut Anda menarik. Pada dasarnya Anda dapat menggunakan jenis font manapun. Namun beberapa jenis font, menurut saya, lebih cocok digunakan pada isi atau konten blog, sementara lainnya lebih baik digunakan pada heading atau judul posting. Font-font untuk heading biasanya tebal-tebal (bold), sedangkan untuk isi lebih kurus (light).
Cara Menggunakan Google Web Fonts di Blog
Setelah Anda memilih font yang sesuai, selanjutnya klik pilihan Quick-use seperti ditunjukkan anak panah C pada gambar sebelumnya. Google Web Fonts kemudian akan menampilkan halaman berikut.
Di halaman ini Anda akan menemukan instruksi bagaimana menyisipkan jenis font untuk blog atau website.
Di bagian paling kanan, Anda akan melihat Page load indikator yang memberikan informasi mengenai seberapa besar dampak yang akan terjadi pada proses loading blog dengan menggunakan font yang Anda pilih tadi. Semakin besar angka yang ditampilkan, maka akan semakin besar pula waktu yang dibutuhkan browser untuk me-render halaman blog/web Anda.
Angka yang ditampilkan pada indikator ini berbeda-beda, tergantung dari jenis serta tingkat ketebalan font yang akan gunakan. Dalam hal ini Google pun memeringatkan untuk tidak menggunakan jenis font terlalu banyak. Saran saya, pilihlah 1 atau 2 jenis font yang memang benar-benar Anda butuhkan.
Lanjutkan dengan melakukan scroll mouse ke bawah dari halaman yang sama hingga Anda menemukan bagian seperti tampak pada gambar berikut.
Di bagian ini Anda diberi tiga pilihan bagaimana menyisipkan jenis font di blog, yakni: Standard, @import, dan Javascript.
Kemudian salin kode yang diberikan dan simpan di antara tag <head> dan </head>. Saya sendiri lebih suka dengan cara pertama. Lebih simple!
Salin pula property CSS pada bagian Integrate the fonts into your CSS ke selector CSS yang akan menggunakan jenis font tersebut! Perhatikan contoh berikut!
h2{
font-family: 'Signika', sans-serif;}
.blog{
font-family: 'Signika', sans-serif;}
Pesan Galat Saat Menggunakan Google Web Fonts di Blogger
Jika Anda hendak menggunakan jenis font dari Google Web Fonts ini di Blogger, Anda tidak perlu terkejut jika Blogger akan menampilkan pesan galat seperti berikut.
Untuk menghilangkan pesan galat ini, cukup tambahkan tanda slash (/) tepat sebelum tanpa tag penutup (>).
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css' />
Mengatur Kerenggangan Font dengan CSS Property
Apabila tampilan font yang Anda pilih dari Google Web Fonts terlalu rapat, Anda bisa menambahkan property CSSletter-spacing dan beri nilai misalnya 0.05em atau 0.1em. Jika terlalu rengang, tambahkan tanda minus (-) di depan nilai yang diberikan.h2{
font-family: 'Signika', sans-serif;
letter-spacing: 0.1em;}
.blog{
font-family: 'Signika', sans-serif;
letter-spacing: -0.05em;}
Selamat mencoba dan semoga bermanfaat!
