Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

in Web Desain | 16 Comments
Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

Hai :) balik lagi sama saya Graha Nurdian, semoga karena keseringan pembaca di blog mas Satrya ini enggak bosen :) . Kali ini sesuai request dari pembaca banyak yang menanyakan lanjutan dari artikel saya tentang kesalahan fatal yang sering terjadi pada typography.

Sampai sekarang, dunia font berkembang sangatlah lambat. Ini membuat orang – orang di internet banyak yang tersandung dengan pilihan font yang jadul seperti Arial, Georgia, Times New Roman, Verdana).

Tapi. Sekarang sudah ada Google Font API. Bisa dibilang Font API adalah database dari “web fonts” Web Fonts adalah kumpulan font yang kita gunakan di internet. Tapi sistem Google memiliki lebih dari itu.

Kita akan membahas tentang dasar dari Google Font API tersebut, dan bagaimana menggunakannya secara maksimal :) . Ikuti terus ya artikel ini.

Mengimplementasikan Google API tidak membutuhkan kemampuan programing, cuman butuh kemampuan tentang web dan html dasar kok. Cuman butuh waktu 5 menit kok enggak lama – lama.

Bagaimana Google Font API Bekerja?

Google Font API menggunakan CSS Property bernama @font-face. Property dari @font-face tersebut memperbolehkan anda untuk menggunakan file font. File font biasanya berekstensi .oft dan .ttf ini mungkin familiar untuk anda pada program Photoshop dan Microsoft Word. Ekstensi dari font tidak berubah kok.

Masalah yang ada adalah kemampuan masing – masing browser untuk meng-handle font tersebut. Semisal, firefox cuman menerima .otf sedangkan IE hanya menerima .eot Website telah dipaksakan untuk menampilkan font yang tidak bisa mereka tampilkan, maka yang terjadi adalah? font pada website menjadi amburadul. Tapi. Google Font API sudah ada untuk mengatasi masalah ini.

Keuntungan

Keuntungan paling utama dari Google Fonts API adalah implementasi web fonts dapat dipermudah dengan menggunakan Google Fonts API. Untungnya, kita tidak perlu khawatir lagi untuk menyesuaikan dengan berbagai macam browser. Google Fonts API juga telah bekerja melisensikan berbagai isu tentang legalitas dari font yang ada. Ini karena font yang ada di direktori font Google merupakan Open Source dan di supply oleh Google sendiri. Tidak perlu khawatir menggunakan font yang illegal

Eh ? saya sudah bilang kalau ini gratis belum? bahkan anda pun tidak perlu mendaftarkan e-mail anda untuk menggunakan layanan ini.

Menurut saya sih Google Fonts API ini kayak nemuin emas di lautan luas buat para web desainer :) *lebay mode=on*

Bagaimana Menggunakannya?

Apa yang perlu anda lakukan pertama kali adalah mengarahkan CSS yang pada dokumen HTML anda. Letakan kode berikut ini pada tag <head> diatas. Pastikan bahwa ini ada di setiap halaman web yang ingin anda beri Google font API. Jika anda memakai CMS seperti WordPress, anda cuman perlu melakukannya sekali.

Lihat contoh dibawah ini. tag <link> dimana anda mereferensikan Google API. Nb:NamaFont adalah font yang ingin anda letakkan pada halaman anda. Ganti dengan font sebenarnya yang ada di Google Font Directory.

<head>
<title>Halaman Utama</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=NamaFont">
<head>/>

Langkah kedua adalah menggunakan CSS untuk menspesifikasikan font yang kita minta. Jika kita ingin menggunakan sebuah font untuk semua halaman kita maka tambahkan kode seperti ini:

p{
font-family: 'NamaFont';
font-size: 12px;
}

Gimana? gampang kan? Anda tidak perlu belajar hal rumit tentang CSS supaya bisa mengimplementasikannya. Cuman anda harus ingat bahwa NamaFont adalah nama dari font yang anda pilih dan dalam ukuran 12 piksel

Menggunakan font lebih dari satu

Anda ingin halaman anda lebih variatif? Yang perlu anda lakukan adalah menambahkan simbol | yang diikuti nama font yang anda inginkan. Lihat pada contoh berikut ini:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=NamaFont:bolditalic|NamaFontLainnya:italic">

Anda melihat dimana anda meletakkan huruf dalam bentuk italic atau membuat teks menjadi bold? Ini mudah seperti kode diatas :)

Resource

Google Font Previewer

Website ini memperbolehkan anda untuk melihat tampilan font yang akan anda tampilkan. Website ini sangatlah membantu untuk menghitung ukuran, weight, penampilan dll. Lalu, website ini akan menampilkan kode yang perlu anda tambahkan pada website anda. Pada dasarnya tool ini memperbolehkan anda untuk tidak memperdulikan tutorial yang saya tulis diatas :p. Tapi tak ada salahnya kan belajar bagaimana semuanya bisa bekerja :)

Google Font Directory

Direktori diatas berisi tentang berbagai font yang ada di Google Fonts API dan bisa kita gunakan. Website ini juga memiliki fitur untuk menampilkan kode yang perlu di implementasikan. :) lebih mudah kan?

Kesimpulan

Pakai google fonts API itu mudah kok :) membuat website anda lebih atraktif dan usable :) sekian tutorial dari saya semoga membantu, kalau ada yang mau ditanyakan silahkan komentar disini dan CMIIW karena saya adalah manusia yang tak luput dari salah dan juga newbie yang sedang belajar :)

Penulis: Graha Nurdian -

16 Years old kiddo who have great interest on Web Design, Blogging, Designing, also an enthusiast gamer. Now I am working on my biggest project which gonna be focused not like my other one. Enjoy my post !

Berlangganan Artikel Gratis !

  • tomi

    di bookmark mas nurdien.. saya kemaren jg baru cari artikel2 gini.. google fonts keliatannya bagus digunakan di blog

    • Graha Nurdian

      Nama saya Graha Nurdian :) entah kenapa mas Satrya mesti melafalkan Graha Nurdin. Moga – moga membantu mas :) untuk saya posting duluan :)

      Emang bagus mas, pilihan fontnya banyak, bisa buat kustomisasi tipografi h1 – h4 nih biar blognya makin atraktif :)

    • http://www.margasatrya.com/ satrya

      Ahaha, salah yah.. :lol:

      SOry2 mas, gak keliatan ada “A” nya, kirain Nurdin :mrgreen:

  • http://danisetiyawan.com dHaNy

    Menarik juga nih… tar saya coba tapi mau merombak blog dulu..

    • Graha Nurdian

      Oke oke sukses mas ngerombak blognya :)

  • Pingback: Tweets that mention Apa itu Google Font API dan Bagaimana Cara Menggunakannya? -- Topsy.com

  • http://anakbetawi.co.cc/ Hendro

    Kurang begitu ngerti sih, tapi boleh juga nih untuk di terapkan,bosen soalnya pakai Arial. Tapi mau tanya nih, apa perbedaannya dengan Generic Font

    • ardianzzz

      Generic font adalah font standar yang terdapat pada OS. tentu saja macamnya beda-beda.
      Karena itulah dikenal web-safe font. Yaitu font yang “aman” digunakan karena terdapat pada kebanyakan OS pada umumnya. Contohnya Arial, Georgia, TNR dsb.

  • http://kafegue.com iskandaria

    Tapi konsekuensinya loading halaman web jadi agak berat :D

    Selain akan menambah http request juga.

    • Graha Nurdian

      Iya sih mas, tapi kalo emang pake server indonesia kan enggak begitu masalah mas :) tampilan top loading enggak begitu berat :)

  • ardianzzz

    Yeah, bisa dikatakan saya terlalu berharap pada Google font.
    Google font bekerjasama dengan Typekit. Font yang bagus ada di Typekit dan harus membayar untuk menggunakannya… haha

    • Graha Nurdian

      Karena font nya bagus – bagus jadi ada harga yang bagus :)

  • Budi Murjiyanto

    Makasih aku bokkmark dulu mas artikel ente.

    Buat untuk dipelajari tentang API google

    • Graha Nurdian

      Iya mas bookmark aja :)

  • diar

    oatut di coba nih mainan baru google,…

  • ynasir

    trims mas atas panduannya.
    mas, google banyak sekali produk api-nya mungkin bisa dibahas ngga ya mas, seperti menggunakan api youtube

    trims mas