Tutorial Penggunaan Google Fonts

imageGoogle kembali memanjakan para blogger dengan menambahkan variasi fonts di blog. Semua font di google fonts directory berlisensi sehingga dapat digunakan pada web apapun, termasuk di blogspot yang penerapannya tergolong sangat mudah. Buat yang belum tahu, bisa sobat lihat pada contoh demo template dore zot pada bagian header dan avieri pada bagian header dan judul postingan.

 

Variasi hurufnya pun cukup banyak, tergantung kita memadu padankan dengan template yang kita gunakan. Dibawah ini ada beberapa fonts yang bisa sobat terapkan di blog sobat, dan cara penggunaannya.

 

image

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

 

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

 

image
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'/>

 

image

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

 

image
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'/>

 

image

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

 

image

<link href='http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC' rel='stylesheet' type='text/css'/>

 

image
<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,bold' rel='stylesheet' type='text/css'/>

 

  1. Masuk ke Rancangan
  2. Kemudian tuju bagian Edit HTML
  3. Copy salah satu kode huruf tersebut dan letakkan  diatas kode </head> pada template sobat.
  4. Kemudian tambahkan font yang sobat gunakan pada bagian css, contohnya seperti berikut :
    #header h1 { font-family: 'IM Fell Great Primer SC', arial, serif; }
    atau lengkapnya kira-kira seperti dibawah ini :

     

    #header h1 {
    font-family:'IM Fell Great Primer SC',arial,serif;
    font-size:46px;
    font-weight:bold;
    letter-spacing:0em;
    line-height:1.2em;
    color:#aaa;
    text-shadow:1px 1px 2px #000;
    margin:0;
    padding:60px 480px 0px 0px;
    }

  5. Simpan Template

 

Perhatikan saja kode yang saya tandai dengan warna merah, karena hanya kode tersebut yang ditambahkan kedalam css template. Sobat juga bisa menggunakannya pada judul postingan (h3) atau judul sidebar (h2). Baiklah, selamat mencoba dan semoga berhasil.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

5 comments

Info yang bermanfaat, sy izin save page ini...met shaum juga

9 Agustus 2010 19.45

thx sob,,,

akhirnya bisa ganti font juga...

10 Agustus 2010 21.43

$3ℓДмД† м3₪û₪ДîkД₪ îþДÐДђ ÞûД§Д, мДДƒ ℓДђîЯ ÐД₪ þД†ђî₪ §øþ...

14 Agustus 2010 19.31

wahhh,...
saya baru tahu ada google fonts kayak ginie..
untung ada mas dody.. :)
btw, bisa dipake di wp gak??

4 November 2010 14.51

trimakasih atas infonya..
ijin untuk mengcopy...
artikel ini bermanfaat banyak untuk saya

Poskan Komentar

Reader Community

Recent Comments