Menggunakan Google Web Fonts

Sekedar tips dan trick desain web..

Beberapa waktu yang lalu, saya dapat komen dari @nengbiker tentang tulisan di blog saya ini yang katanya bikin mata pusing. Yah, sebenarnya saya sudah sadar sejak lama sih, cuma malas oprek-oprek blog lagi kalau sudah jadi gini. Hehe.. Lagian theme ini latar belakangnya pakai file gambar, yang artinya, ngubah satu ya ngubah semua. Siyal.

Akhirnya saya pikir mending ganti font aja deh, yang lebih enak dibaca. Arial yang saya pakai sebelumnya memang font kadaluwarsa, yang bikin mata jadi bosen baca. Akhirnya, saya pikir-pikir mending pakai @font-face CSS3 aja biar font-nya lebih bagus.

Tapi setelah saya coba sendiri, kok jadi nggak efisien ya. Harus setting banyak @font-face di file CSS, terus upload file-nya, dan sebagainya. Repot.

Untungnya sekarang ada cara yang lebih sederhana untuk mengubah font itu, pakai Google Web Fonts. Gimana caranya?

  1. Pastikan dulu Anda bisa mengubah file CSS dan Header dari web/blog/situs Anda. Entah pakai editor di backend (kalau wordpress), entah edit file di cPanel, dan sebagainya.
  2. Langkah berikutnya, ya cari font yang sesuai dulu donk. Buka halaman http://www.google.com/webfonts untuk melihat font yang bisa dipakai nantinya.
  3. Di halaman font yang dipilih, Anda bisa melihat contoh penampilan font tersebut, dari ukuran kecil hingga besar. Nah, masuk ke tab “Use this font” untuk melihat kode yang Anda butuhkan.

    Salah satu contoh, font PT Sans yang saya pakai

  4. Misalkan, saya pakai font PT Sans untuk blog ini. Yang harus dilakukan pertama kali adalah memasukkan kode html untuk source CSS dari google itu, di dalam tag <head> Anda.

    Tata cara yang disediakan Google sudah cukup jelas

    Misalkan, seperti kode di bawah ini. 

    <head>
      <!-- kode lainnya -->
      <link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
      <!-- kode lainnya -->
    </head>
  5. Nah, setelah itu tinggal masukkan font-family yang telah diatur oleh Google tersebut. Misalkan, Anda mau secara keseluruhan memakai font-face yang baru saja diatur, maka kode akan seperti berikut ini.
    body {
      font-family: "PT Sans", sans-serif;
    }
  6. Selesai sudah. Selama browser yang digunakan untuk membuka site Anda support CSS3, maka tampilannya akan seindah font yang Anda pilih. Saran dari Google, cukup gunakan saja variant yang Anda butuhkan.Bisa dilihat, kalau font yang saya pakai contoh saja menambah 224kb data. Cukup besar loh kalau untuk ukuran kecepatan koneksi Indonesia. Hehe..

Selamat mencoba.

Post ini juga sebagai pelengkap tutorial saya tentang CSS3 di PC Mild edisi 11 nanti. Daripada kelupaan, saya bikin dulu deh. Hehe…

1 Comments

Leave a Comment.