tip trik: Font

Tampilkan postingan dengan label Font. Tampilkan semua postingan

Jumat, 22 November 2013

[Lanjutan] Koleksi Google Font API untuk Blogger

Postingan ini merupakan lanjutan Artikel kemaren di Koleksi Google Font API untuk Blogger, Font Google pilihan dari Metro Personal Blog. Dan masih banyak lagi jenis font-font google yang support untuk Blogger, tapi inilah jenis font-font pilihan terbaik versi Metro Personal Blog :). Sebenarnya ribuan jenis font-font Google sih, tapi tidak semuanya Support untuk Blogger.

Google Web Font Logo

Berikut ini beberapa jenis font-font dari google, lanjutan dari postingan kemaren tentang Koleksi Google Font API untuk Blogger, Koleksi Pilihan dari Metro Personal Blog.

PT Sans
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'PT Sans', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'PT Sans', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Actor
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Actor', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Actor', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

PT Sans Narrow
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'PT Sans Narrow', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'PT Sans Narrow', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Dosis
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Dosis', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Dosis', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Cabin
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Cabin', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Cabin', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Playfair Display SC
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Playfair Display SC', sans-serif;
        font-size: 14px;
 text-transform: normal;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Playfair Display SC', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Gabungan dua atau tiga jenis Font menghasilkan Font Unik

Google Web Font Logo

Oswald | Ubuntu
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Oswald', 'Ubuntu', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Oswald', 'Ubuntu', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Source Sans Pro | Oswald
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Oswald' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Source Sans Pro', 'Oswald', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Source Sans Pro', 'Oswald', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Cabin | Playfair Display SC
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Cabin|Playfair+Display+SC' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Cabin', 'Playfair Display SC', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Cabin', 'Playfair Display SC', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Note :
Untuk penggabungan jenis font-font yang lain, silahkan gabung-gabungkan menurut selera anda, contohnya gabungan jenis font-font diatas (maksimal dua atau tiga jenis font).

Contoh gabungan dua jenis font --> http://fonts.googleapis.com/css?family=Oswald|Ubuntu

Untuk informasi lengkap silahkan kunjungi Google Font API Labs disini dan Visit the Google Font Directory disini atau di Google Webfont disini.

Selamat mencoba.

Koleksi Google Font API untuk Blogger

Koleksi Google Font API untuk Blogger - Hi sobat blogger, berikut ini beberapa koleksi Google Font API, pilihan dari Metro Personal Blog, di gunakan untuk mempercantik style tulisan-tulisan blog anda. Silahkan pilih yang mana, sesuai kesukaan anda.

Berbagai macam jenis Font disediakan oleh Google Font API untuk membantu para Web Development dan Blogger untuk meningkatkan kualitas Blog. Font atau jenis Huruf Pilihan Metro Personal Blog di antaranya adalah :

Tangerine
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Tangerine', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Tangerine', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Open Sans
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Open Sans', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Montez
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Montez', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Montez', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Rochester
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Rochester', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Rochester', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Open Sans Condensed
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Six Caps
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Six Caps', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Six Caps', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Tulpen One
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Tulpen One', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Tulpen One', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Yanone Kaffeesatz
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Love Ya Like A Sister
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Love Ya Like A Sister', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Love Ya Like A Sister', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Oswald
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Oswald', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Oswald', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Meddon
Amazing Metro Personal Blog

Normal Font 12 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Meddon', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Meddon', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Reenie Beanie
Amazing Metro Personal Blog<

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Reenie Beanie', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Reenie Beanie', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Dancing Script
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Dancing Script', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Dancing Script', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Calligraffitti
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Calligraffitti', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Calligraffitti', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Pacifico
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Pacifico', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Pacifico', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Kristi
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Kristi', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Kristi', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Zeyada
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Zeyada', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Zeyada', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Vibur
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Vibur', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Vibur', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Over The Rainbow
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Over The Rainbow', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Over The Rainbow', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Drawing of A New Day
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Drawing of A New Day', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Drawing of A New Day', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Josefin Slab
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Josefin Slab', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Josefin Slab', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Ubuntu
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Ubuntu', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Ubuntu', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Noto Sans
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Noto Sans', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Lato
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Lato', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Lato', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Bitter
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Bitter', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Bitter', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Source Sans Pro
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Source Sans Pro', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Archivo Narrow
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Archivo Narrow', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Archivo Narrow', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Kaushan Script
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Kaushan Script', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Kaushan Script', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Lobster
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Lobster', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Lobster', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Shadows Into Light
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Shadows Into Light', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Shadows Into Light', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Droid Sans
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Droid Sans', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Droid Sans', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Droid Serif
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Droid Serif', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Droid Serif', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Playfair Display
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Playfair Display', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Playfair Display', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Racing Sans One
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post ? Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

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

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Racing Sans One', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Racing Sans One', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Untuk informasi lengkap silahkan kunjungi Google Font API Labs disini dan Visit the Google Font Directory disini atau di Google Webfont disini.

Selamat mencoba.