Cara Memasang Google Font API di Blogspot

Google meluncurkan Google Font API dan Google Font Directory pada bulan Mei lalu. Google Font API dapat menjadi solusi bagi para web developer dan khususnya para blogger untuk menambahkan berbagai high quality font ke dalam blog. Google juga memberikan kemudahan dalam penggunaan Google Font API ini. Ini contoh Google Font API:

Nah, bagi temen-temen yang ingin mencoba memasang Google Font API, berikut saya paparkan langkah-langkahnya:

Memilih Font API

1. Masuk ke Google Font Directory-Previewer

2. Pada kolom sebelah kiri, Temen-temen dapat memilih berbagai setting font yang dinginkan, seperti font family, font size, decoration, dll. Silakan Temen-temen pilih sesuai keinginan. 

3. Pada kotak di bawah font preview, terdapat kode HTML. Kode inilah yang selanjutnya harus Temen-temen pasang pada blog Temen-temen.

Memasang Font API

1. Perhatikan kode pada langkah no. 3 di atas. Kode tersebut kita bagi dua bagian yaitu kode stylesheet link dan kode CSS.

2. Kode stylesheet link pada contoh di atas adalah kode:

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

   Bentuk umum dari kode stylesheet link adalah:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Font+Name" type="text/css">

    Font+Name adalah jenis font Google Font API. Tergantung pada pilihan Temen-temen pada langkah 2
    Memilih Font.
    Letakkan kode di atas sebelum/ di atas kode </head>

3. Kode CSS pada contoh di atas adalah:

<style>
body {
  font-family: 'Tangerine', serif;  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1em;
}
</style>

   Temen-temen perhatikan saja kode dengan highlight kuning.

4. Nah, sampai di sini Temen-temen bisa meletakkan kode dengan highlight kuning langkah di atas pada 
    bagian element font yang diinginkan.
5. Berikut contoh penerapan Font API pada element font:
    Font Judul Blog 
    Pertama tentukan dahulu kode CSS untuk judul blog Temen-temen, karena setiap template bisa 
    berbeda-beda. Untuk contoh, kode CSS untuk blog ini adalah .blogname h1 maka tinggal tambahkan 
    kode CSS tadi menjadi:

.blogname h1{
     font-family: 'Tangerine', serif;  font-size: 28px;
     font-style: normal;
     font-weight: 400;
     text-shadow: none;
     text-decoration: none;
     text-transform: none;
     letter-spacing: 0em;
     word-spacing: 0em;
     line-height: 1em
  }

    Font Judul Post
    Seperti pada contoh di atas, pertama tentukan dahulu kode CSS untuk judul post blog temen-temen. Pada
    contoh di sini adalah .title1  h2 maka tinggal tambahkan saja kode CSS Font API menjadi:

 .title1  h2 {
     font-family: 'Tangerine', serif; font-size: 28px;
     font-style: normal;
     font-weight: 400;
     text-shadow: none;
     text-decoration: none;
     text-transform: none;
     letter-spacing: 0em;
     word-spacing: 0em;
     line-height: 1em
     }

   Font pada Postingan
   Nah, untuk bagian ini lebih mudah Temen-temen tinggal menambakan kode berikut pada Edit HTML pada Kotak Posting:

   <div style="font-family: 'Font Name', serif;">Teks kamu di sini</div>

   Ganti Font Name dengan font name sesuai dengan stylesheet link yang temen-temen pasang pada langkah
   2 Memasang Font API.

Selain tiga contoh penerapan Google Font API di atas Temen-temen dapat menerpakan Font API pada element font lainnya di blog Temen-temen.