Cara Menggunakan Google WebFont pada Halaman Web!!!

01.55 |

ntuk 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 kode Nama 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>