Sebuah halaman web untuk publik di situs online adalah dokumen yang bisa diakses oleh siapa saja yang terhubung ke internet, yang sebisa mungkin bisa dilihat dengan tampilan seragam untuk berbagai sistem komputer/parangkat lain yang digunakan oleh para pengunjung situs, termasuk tampilan font yang sama untuk setiap perangkat tersebut.
Dalam kaitan itu, salah satu kendala bagi seorang web designer atau juga pemilik blog/situs adalah terbatasnya jenis font yang bisa digunakan, karena tidak semua jenis font terinstall pada perangkat yang digunakan oleh pengunjung. Sehingga tak heran kalau tampilan font yang bisa dilihat di berbagai situs online relatif seragam dan hanya itu-itu saja. Kalau pun sebuah situs ingin menampilkan jenis font khusus, biasanya menggunakan file image, tapi tentunya hal tersebut bisa membuat loading halaman web jadi lebih berat.
Membaca situasi tersebut, Google si raja search engine baru saja meluncurkan Google WebFont, sebuah layanan menggunakan Google Font API agar para perancang web bisa lebih kreatif menampilkan beberapa jenis font khusus, sehingga tampilan font pada sebuah halaman web bisa terlihat lebih cantik, keren dan variatif.
Font-font di Google ini bisa ditampilkan di situs manapun dengan cara memasang kode tertentu pada halaman web. Berikut ini adalah sedikit tips dan petunjuk aka panduan cara pemasangannya di halaman web dan juga pada template/theme blog.
Dalam kaitan itu, salah satu kendala bagi seorang web designer atau juga pemilik blog/situs adalah terbatasnya jenis font yang bisa digunakan, karena tidak semua jenis font terinstall pada perangkat yang digunakan oleh pengunjung. Sehingga tak heran kalau tampilan font yang bisa dilihat di berbagai situs online relatif seragam dan hanya itu-itu saja. Kalau pun sebuah situs ingin menampilkan jenis font khusus, biasanya menggunakan file image, tapi tentunya hal tersebut bisa membuat loading halaman web jadi lebih berat.
Membaca situasi tersebut, Google si raja search engine baru saja meluncurkan Google WebFont, sebuah layanan menggunakan Google Font API agar para perancang web bisa lebih kreatif menampilkan beberapa jenis font khusus, sehingga tampilan font pada sebuah halaman web bisa terlihat lebih cantik, keren dan variatif.
Font-font di Google ini bisa ditampilkan di situs manapun dengan cara memasang kode tertentu pada halaman web. Berikut ini adalah sedikit tips dan petunjuk aka panduan cara pemasangannya di halaman web dan juga pada template/theme blog.
Daftar Nama Font di Google WebFont
Daftar nama font yang saat ini tersedia di Google WebFont semuanya ada 18 buah font. Contoh karakternya bisa dilihat di samping ini.
- Cantarell
- Cardo
- Crimson Text
- Droid Sans
- Droid Sans Mono
- Droid Serif
- IM Fell
- Inconsolata
- Josefin Sans Std Light
- Lobster
- Molengo
- Nobile
- OFL Sorts Mill Goudy TT
- Old Standard TT
- Reenie Beanie
- Tangerine
- Vollkorn
- Yanone Kaffeesatz
Cara Menggunakan Google WebFont pada Halaman Web
Untuk menggunakan Google WebFont, kita perlu melakukan dua tahapan berikut ini (ganti tulisan Nama Font dengan nama font seperti yang tersedia di atas): 1. Loading font dengan kode stylesheet di antara tag <head> dan </head>:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nama+Font">Khusus untuk loading font ini, bila ada nama font yang menggunakan spasi, ganti spasi tersebut dengan karakter plus (
+).Kita bisa melakukan loading beberapa font sekaligus, yaitu dengan menyisipkan karakter batang (
|) di antara nama font, sehingga syntax nama fontnya menjadi: Nama+Font+1|Nama+Font+2|Nama+Font+3. Tapi jangan kebanyakan, nanti loadingnya jadi berat.2. Tentukan style pada elemen tertentu, yaitu dengan dua cara (silahkan pilih):
a. Pasang kode stylesheet (di antara tag
<style> dan </style>):CSS selector {
font-family: 'Nama Font', serif;
}Ganti tulisan
CSS selector dengan elemen yang akan menggunakan Google WebFont, misalnya tag h1, h2 dan tag lainnya, atau id dan class untuk elemen tertentu.b Pasang kode style secara inline pada tag tertentu:
<div style="font-family: 'Nama Font', serif;">Bla bla bla bla bla</div>Catatan
Coba perhatikan kode style css di atas, setelah teks kodeNama Font selalu diikuti dengan kode serif, itu maksudnya adalah menambahkan kode font generik (standar) sebagai alternatif bila font khusus Google WebFont gagal diload. Walau pun kemungkinan gagalnya kecil (mengingat kinerja server Google yang sangat bisa diandalakan) tapi tetap perlu diantisipasi untuk berjaga-jaga.Kode font generik atau standar maksudnya di sini adalah font-font yang sudah pasti ada di setiap sistem komputer, yaitu
serif, sans-serif, dan monospace, atau bisa juga menggunakan font-font yang sudah umum digunakan seperti Arial, Verdana, dan lain sebagainya. *
Contoh Kode Halaman Web dengan Google WebFont
Pada contoh ini font yang digunakan adalah Tangerine, Reenie Beanie, dan Droid Sans.<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Reenie+Beanie|Droid+Sans">
<style>
h1 {
font-family: 'Tangerine', serif;
font-size: 32px;
text-shadow: 3px 3px 6px #aaa;
}
.rb {
font-family: 'Reenie Beanie', serif;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Tag H1 Diberi Style Font "Tangerine"</h1>
<p class="rb">Paragraf ini menggunakan class dengan font "Reenie Beanie"</p>
<div style="font-family:'Droid Sans',sans-serif; font-size:13px; color:#666;">
<p>Tag div ini diberi style font "Droid Sans"</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<p>Kalau ini font biasa aja.</p>
<p>Lorem ipsum dolor sit amet, datanglah kemari. Wkkkkkk......... 
</p>
</body>
</html>
*
15 komentar:
bro klo di hasil SERP (search Engine Result Page) itu nama fontnya apa ya?
thx for info dan sharenya...
tapi emng pengaruh ya tampilan font?
mw ganti font nie..thx infonya..akgirnya ketemu juga nie blog.
nice....makasi gan dah berbagi font...
thx for info font dan sharenya...izin bookmark
sippp gannn...thx a lot ats font na....
makasi gna infonya...izin share ya....
terimakasih...saya juga menggunakan font dari anda....
bro klo di hasil SERP (search Engine Result Page) itu nama fontnya apa ya?thxxx ya..
thx for info dan sharenya...
tapi emng pengaruh ya tampilan font?
ane coba ganti dolo ya..thx
okehh makasi...saya coba font dari anda...
makasi broo..telah berbagi font...
keren2 juga font nya. bole ni daripada pake arial dan TNR mulu. bosan lihat font nya.
wihhh source code yang bagus nihhh buat atur font. nuhunnn bang
Post a Comment