Memperoleh tampilan yang indah merupakan harapan dari setiap designer web, apalagi penggunaan font yang tepat atau tipografi adalah hal yang juga penting bagi designer web, namun penggunaan jenis font yang beragam dapat menjadi hambatan bagi mereka, karena tidak semua hosting memiliki font yang beraneka ragam. Hal tersebut dapat diatasi dengan mengganti font dengan image, atau juga melakukan import font, dengan menggunakan CSS style, yaitu dengan font-face, atau dengan hanya menggunakan font-font standard.

Menggunakan font-face ataupun image perlu juga mengunggah font atau image yang diperlukan ke suatu tempat yang kemudian nanti dapat di load di halaman web. Sekarang telah ada beberapa solusi untuk mengatasi sulitnya menggunakan font yang beragam, sebagai contoh, yaitu type-kit. Website ini menyediakan berbagai macam font yang dapat digunakan secara langsung di web kita, tanpa kita harus mengunggah font ataupun mengganti font menjadi image. Namun fitur ini tidak dapat diperoleh secara gratis, alias berbayar.

Google telah menyediakan solusi ini dan kita bisa memperoleh fitur yang sama secara gratis dengan Google Font API. Anda dapat mengetahui tentang Google Font API di sini.

Penggunaan Google Font API

Anda dapat menggunakan font yang tersedia di directory font Google secara gratis, dan tidak perlu untuk melakukan registrasi. Anda dapat menuju ke directory font untuk mulai memilih font apa yang akan anda gunakan.

List Directory Google Font

Ketika pertama anda masuk ke directory google font, anda akan disuguhi dengan beraneka tipe font, memang saat ini tipe font belum begitu banyak, tapi kemungkinan besar google pasti akan menambah tipe font lebih banyak lagi nanti. Anda bisa memilih salah satu dari font yang anda inginkan. Pada contoh ini, saya akan memilih font “Lobster”.

Lobster Font

Klik link bertuliskan “Click to embed Lobster”. Maka anda akan dibawa ke halaman selanjutnya, dimana anda dapat melihat Specimen dari font, Character Set, Description, dan juga bagaimana cara untuk menggunakan font tersebut.

Specimen Font Lobster

Character Set Font Lobster

Description Font Lobster

Get The Code Lobster Font

Dari tab paling akhir ini kita dapat mengetahui bagaimana cara menggunakan font Lobster dari google font API.

Caranya adalah cukup dengan copy style berikut di dalam tag ‘head’ file web kita,

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

Dan font siap digunakan dengan menggunakan style css ‘font-family’

h1 {font-family: Lobster, Arial, Serif;}

Dibawah ini adalah contoh penggunaan font Lobster.

Scriptnya sederhana.

<span style="font-family: Lobster, arial, serif; font-size: 24px; font-weight: bold;">Hallo Ini Contoh Font Lobster dari Google Font API.</span>

Coba anda copy and paste tulisan dibawah ini. Anda akan mendapati bahwa tulisan dibawah murni teks dan bukan image, tapi bisa berbentuk unik, karena kita sudah menggunakan Google Font API.

Hallo Ini Contoh Font Lobster dari Google Font API.

Selamat Mencoba :D

 

Kosmo

Sangat tertarik dengan pengembangan web, internet, dan design. Anda bisa terhubung melalui facebook, juga twitter

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>