Perindah Font Website Menggunakan Google Web Fonts

Perindah Font Website Menggunakan Google Web Fonts

Dahulu, sebelum memasuki era web, support yang ada untuk tampilan aplikasi web sangatlah rendah. Salah satu batasan yang ada adalah penggunaan font pada tulisan…

Dahulu, sebelum memasuki era web, support yang ada untuk tampilan aplikasi web sangatlah rendah. Salah satu batasan yang ada adalah penggunaan font pada tulisan di website. Umumnya yang digunakan hanyalah jenis font serif dan sans-serif yang akan otomatis diatur oleh browser pengakses. Menggunakan font custom hanya mungkin bila di komputer pengakses juga memiliki font tersebut.

Misalkan, sebuah website dikembangkan dengan font Arial. Maka pengakses yang menggunakan sistem operasi Linux ataupun Mac OS tidak akan melihat tampilan yang sama, karena font tersebut tidak tersedia di sistem operasi tersebut. Tentu saja semakin tidak mungkin untuk menggunakan font non-standar yang aneh-aneh. Beberapa cara digunakan. Yang paling mudah, yaitu membuat heading dengan font unik yang disimpan dalam bentuk gambar.

Sejak munculnya CSS3 yang memberikan berbagai fitur, memperindah font website menjadi lebih mudah. Yang membuat lebih mudah adalah fitur @font-face, yaitu untuk mengembed font custom ke website, sehingga bila pengakses belum memiliki font tersebut, akan otomatis diambil dan digunakan untuk merender tampilan website.

Menggunakan @font-face bisa dibilang mudah, bisa dibilang cukup susah. Beberapa kendalanya muncul dari penggunaannya. Pertama, apakah format file font yang digunakan tersebut support di sistem operasi atau perangkat pengakses? Tentu tidak. Kedua, apakah font yang digunakan tersebut memiliki lisensi untuk digunakan secara bebas di website? Belum tentu. Yang ketiga dan seterusnya, silahkan Anda cari sendiri kendalanya.

Untungnya, saat ini ada cara yang lebih sederhana untuk mengubah font tersebut. Ya, Google menangkap peluang ini untuk memudahkan web developer menggunakan font yang beragam, dengan memanfaatkan Google Web Font. Bagaimana caranya?

  1. Pastikan dahulu, apakah Anda bisa mengubah file CSS dan Header dari web/blog/situs Anda. Entah melalui editor di backend (seperti pada wordpress), atau edit file di cPanel, dan sebagainya.
  2. Langkah berikutnya, carilah font yang sesuai keinginan Anda. Buka halaman http://www.google.com/webfonts untuk melihat font yang bisa dipakai nantinya. Anda bisa memfilter berdasarkan kategori font yang Anda gunakan.
  3. Di setiap tampilan font, Anda bisa menemukan di bagian pojok kanan bawah, beberapa menu untuk melihat font lebih lengkap. Anda bisa mengklik link “Pop out” untuk menampilkan seluruh karakter yang disupport oleh font tersebut. Anda juga bisa menambahkan ke Collection Anda. Untuk mulai menggunakan Google Font pada website Anda, klik link “Quick-use” di pojok kanan bawah tersebut.
  4. Bila font yang Anda pilih memiliki beberapa jenis style, Anda bisa memilih style apa saja yang akan Anda gunakan. Perlu diperhatikan bahwa semakin banyak style, tentu load halaman web Anda akan semakin berat. Google menyarankan Anda untuk memilih style yang Anda perlukan saja, demi meningkatkan performa load web.
  5. Di bagian bawahnya lagi, Anda bisa memilih jenis karakter yang akan digunakan dalam web Anda. Setelah itu, Anda bisa melihat kode yang harus Anda tambahkan ke kode website Anda agar bisa menggunakan font tersebut. Ada 3 cara penggunaan, yaitu Standard, @import, dan Javascript. Silahkan Anda pilih cara mana yang menurut Anda paling efektif.
  6. Misalkan Anda menggunakan font “PT Sans” dan memilih mode kode Standard. Yang harus dilakukan pertama kali adalah memasukkan kode html untuk source CSS dari google itu, di dalam tag <head> Anda. Contohnya, seperti kode di bawah ini.
    <head>
      <!-- kode lainnya -->
      <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
      <!-- kode lainnya -->
    </head>
  7. Langkah terakhir, masukkan font-family yang telah diatur oleh Google tersebut ke dalam kode CSS Anda. Misalkan, Anda mau website Anda secara keseluruhan memakai font-face yang baru saja diatur, maka kode akan seperti berikut ini.
    body {
      font-family: "PT Sans", sans-serif;
    }
  8. Selesai sudah. Selama browser yang digunakan untuk membuka site Anda support CSS3, maka tampilannya akan seindah font yang Anda pilih. Selamat mencoba.
Tag: , , , , , , ,

4 Comments

Leave Comment
  1. Stella says:

    This info is the cat’s pasaamj!

Write Comment

Your email will not be published. The marked label is required.