Cara Menggunakan Google Font API di Blogger

Sebuah template blog, biasanya menggunakan fonts standar seperti Arial, Verdana, Trebuchet MS, dll. Karena berupa jenis huruf standar, kadang seorang blogger menginginkan hal berbeda pada blognya sehingga berniat mengganti jenis huruf template, baik itu semua jenis huruf di blog, maupun hanya jenis huruf di bagian tertentu blog, misalnya Judul Artikel. Sayangnya, kita tidak bisa begitu saja mengganti jenis huruf sesuka hati kita. Untuk itu, kita harus menggunakan jenis huruf yang ada di google fonts, menambahkannya ke koleksi, memasang kode tertentu pada template, lalu mengatur CSS jenis huruf blog.

Cara Mengganti Jenis Huruf di Blog.

Untuk menggunakan jenis huruf yang ada di google fonts, berikut tutorial lengkapnya mulai dari mencari jenis huruf, menambahkan kode fonts, lalu mengatur CSS pengaturan fonts template :

• Kunjungi http://www.google.com/webfonts
• Cari jenis huruf / fonts yang anda inginkan lalu klik tombol "Add To Collection".

Gambar 1 : Penggunaan Google Font API di Blogspot

• Klik tombol "USE".

Gambar 2 : Penggunaan Google Font API di Blogspot

• Anda akan melihat preview jenis huruf yang anda pilih. Berikan tanda checklist untuk semua style fonts agar lebih banyak variasi tebal huruf yang bisa di gunakan nantinya.

Gambar 3 : Penggunaan Google Font API di Blogspot

• Scroll halaman ke bawah lalu copy kode jenis huruf anda. Kode jenis huruf tersebut akan terlihat kurang lebih seperti ini :

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

Gambar 4 : Penggunaan Google Font API di Blogspot

• anda harus menambahkan slahs ( kode penutup ) pada kode tersebut agar bisa di pasang di template blog. Setelah kode ditambahkan, kodenya akan terlihat seperti di bawah ini : ( Perhatikan kode yang berwarna merah. )

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'/>

• Tambahkan kode tersebut ke dalam template dengan memasangnya di atas kode : </head>

Selanjutnya ganti jenis huruf pada bagian template yang anda inginkan dengan cara seperti ini :

•  Untuk menggunakan font tersebut sebagai font default blog, cari kode font untuk body template yang kurang lebih terlihat seperti berikut ini :

body{
width:1000px;
color:#000;
font-size:13px;font-family:'Verdana',arial;
text-align:center;
margin:0 auto}

Ganti Kode berwarna merah dengan Nama jenis huruf yang anda pilih di google fonts.

• Jika anda hanya ingin menggunakan font tersebut hanya pada judul artikel, cari kode yang mirip seperti berikut :

.post h3 a{
color:#0040FF;
font-family:"verdana";
font-weight:700;
text-decoration:none}

Ganti "Verdana" dengan jebis huruf google font anda. Jika template anda tidak memiliki kode tersebut, copy saja kode yang berwana merah dan biru di atas lalu masukkan pada bagian CSS judul artikel blog anda.

*Catatan :

• kode post h3 bisa saja post h1 ( tergantung css template ) biasanya untuk template yang telah menggunakan pengaturan Dynamic Heading.
• Untuk mengatur tebalnya jenis huruf, ganti kode yang berwarna hijau dengan ketebalan yang lain, misalnya 300 atau 400. Ini hanya berlaku jika anda memberikan tanda checklist pada penjelasan step sebelumnya saat mengambil jenis huruf di google fonts.

Semoga bermanfaat....