Tips Menggunakan Google Font API

Tutorial - 13 Jun 2014

Dalam membangun web, penggunaan font sudah tidak terpisahkan. Pemilihan desain font yang baik tentu akan sangat mempengaruhi hasil dari web yang dibuat. Salah satu fasilitas penyedia font yang sangat populer ialah Google Font. Google Font merupakan fasilitas API font yang dapat Anda gunakan secara gratis baik untuk keperluan komersil ataupun pribadi. Fasilitas ini dapat Anda akses melalui Google Font.

Pada artikel ini akan diberikan beberapa tips menggunakan Google Font. Tips ini nantinya bisa Anda terapkan dalam menggunakan fasilitas Google Font.

Tips 1 – Cara Memasang Google Font di Web

Setelah menentukan font yang akan digunakan, langkah selanjutnya ialah memasang font tersebut pada web Anda. Google telah menyediakan 3 cara untuk memasang font tersebut yaitu melalui perintah HTML, CSS dan Javascript.

HTML
Letakkan link font yang sudah Anda pilih di bagian head web Anda.

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

CSS
Jika menggunakan perintah CSS, letakkan pula perintah import di awal file CSS web Anda.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

Javascript

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Open+Sans::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

Setelah memasang font yang diinginkan, maka langkah selanjutnya ialah meng-integrasi-kan font tersebut dengan desain web Anda (pada CSS). Contoh :

body {
font-family: 'Open Sans', sans-serif;
}

Tips 2 – Download Google Font

Apakah Google Font hanya bisa digunakan secara online ? tentu tidak. Jika Anda ingin menggunakan Google Font secara offline, Anda dapat mendownload dan meng-instalnya di komputer/laptop. Untuk melihat langkah detail men-download dan meng-instal Google Font di komputer simak video berikut :

Tips 3 – Multiple Google Font

Jika Anda menggunakan lebih dari 1 jenis font, maka gabungkanlah perintah untuk memasang link font tersebut hanya dengan sekali request. Misal Anda akan menggunakan font Lobster dan Open Sans, biasanya kita akan memasang kedua font tersebut dengan request link yang berbeda. Contoh :

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

Tidak ada yang salah dengan cara diatas, namun server web Anda akan sangat terbeban karena harus melakukan 2 kali request font dari Google Font API. Untuk mengatasi hal tersebut, gabungkanlah perintah request font seperti contoh dibawah.

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

Tips 4 – Gunakan Style Font yang Dibutuhkan

Jangan memilih semua style font, tetapi pilihlah style font yang benar-benar Anda butuhkan. Jika Anda memilih semua style font secara bersamaan, maka waktu loading web Anda akan sangat lama.

Tips Menggunakan Google Font API

Kesimpulan

Demikianlah tips menggunakan Google Font API. Optimalkanlah web Anda dalam menggunakan fasilitas Google Font API. Selamat mencoba dan semoga bermanfaat.