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.
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
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.
Tidak ada komentar:
Posting Komentar