Google Font Directory dan Google Font API

May 21, 2010 by maseko

google-font-directory Satu lagi persembahan Google untuk dunia web. Kemarin, Google telah merilis layanan baru, Google Font Directory dan Google Font API.

Google Font Directory merupakan direktori berisi koleksi font-font web open-source, dan dengan Google Font API, maka font-font tersebut dapat digunakan oleh siapa pun seperti pemilik atau pengelola website agar dapat memperindah website-nya dengan pemilihan font yang sesuai. Bagi Anda, ketika nantinya membuka beberapa website mungkin saja tidak hanya mendapati font-font standar yang biasa digunakan tetapi juga berbagai variasi font-font menarik yang ada di Google Font Directory.

Saat ini mungkin hanya terdapat 18 jenis font yang ada di Google Font Directory, namun ke depannya jumlah ini ke depannya sepertinya akan terus bertambah.

Bagi Anda yang akan membuat halaman web dengan menggunakan font-font yang ada di Google Font Directory, langkah pertama yang dapat dilakukan adalah menambahkan stylesheet link di bagian <HEAD> halaman web.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nama+Font" />

Ubah Nama+Font dengan Font API parameter name dari font yang Anda pilih dari Google Font Directory, misalnya Cantarell, Droid+Sans, Tangerine atau lainnya.

Jika dalam suatu halaman web akan menggunakan dua atau lebih font yang ada di Google Font Directory, maka Nama+Font diisi dengan nama-nama parameter API dari font-font tersebut dan masing-masing nama font dipisahkan dengan tanda pipa (|), misalnya akan memanggil font Tangerine, Inconsolata, dan Droid Sans maka Nama+Font diubah menjadi Tangerine|Inconsolata|Droid+Sans.

Selanjutnya untuk mengaplikasikan font tersebut pada suatu elemen halaman web, dapat dilakukan melalui stylesheet, misalnya:

CSS selector {
  font-family: 'Nama Font', serif;
}

atau langsung dilakukan secara inline pada elemen tersebut, misalnya:

<div style="font-family: 'Nama Font', serif;">Teks Anda</div>

Berikut ini contoh langsung penggunaan font dari Google Font Directory

However far away,

I will always love you

However long I stay,

I will always love you

Whatever words I say,

I will always love you

Selain itu, berkolaborasi dengan Typekit, Google juga menyediakan WebFont Loader, Javascript library guna lebih dapat mengontrol pemuatan font dibandingkan dari penggunaan Google Font API. Dengan WebFont Loader, tak hanya font-font dari Google Font Directory saja yang dapat digunakan, tetapi juga dari provider lain atau pun digunakan secara bersamaan.

Berkeinginan mengganti font halaman website Anda dengan font-font dari Google Font Directory?

Silahkan Mencoba!

Category Posted in Fonts, Google, Internet, Web Development

55 Responses to “Google Font Directory dan Google Font API”

Muchos Dantec said on May 21, 2010, 9:19 pm:

Wah, perlu dicoba nih. Tengkiu, infonya.

JERUK » Google Font Directory dan Google Font API said on May 21, 2010, 10:50 pm:

[...] full post on maseko’s weblogPowered By [...]

arief said on May 22, 2010, 6:05 am:

wah asyik nih, bisa lebih berwarna tampilan sitesnya…lihat puisi2 diatas jg jd lebih indah….thx mas…

Download Open Source Font dari Google Font Directory « Code Blog said on May 22, 2010, 1:47 pm:

[...] Google Font hanya menyediakan 18 font, namun akan bertambah lagi. Maseko telah menjelaskan dalam blognya perihal cara menggunakan web font [...]

yr said on May 23, 2010, 5:19 am:

sepertinya ini khusus webmaster ya :)

kompunetsa said on May 23, 2010, 8:21 am:

keren nih…
kpn2 boleh dicoba :D

problogger said on May 25, 2010, 6:36 pm:

mirip sama penggunaan @fontface

tikaajahcukup said on June 4, 2010, 9:24 am:

aduuhhh ko sayah gagal terus yah?
yg code nya itu d paste ke sebelah mana sih??
makasih…

raden said on June 4, 2010, 9:54 am:

perlu di coba nih…..

#10

xamoeba said on June 4, 2010, 9:57 am:

wah infonya menarik dan sangat bagus, sudah saya terapkan dan berhasil 100 %. makasi mas eko

#11

adhimas said on June 12, 2010, 10:34 am:

infonya sgt menarik :)

#12

Mbh suro djogja said on June 24, 2010, 2:35 am:

Nyobi

#13

Appletree Print said on June 27, 2010, 8:29 pm:

Thanks for the info, I always like to stay on top of what Google are doing. Thanks for the heads up!

#14

ariz said on July 17, 2010, 11:35 pm:

wah…..mw q coba dech…….

#15

Mr_Chuya said on August 13, 2010, 8:00 am:

Mantab infonya Gan..
mo nyoba ah ..
Thanks.

#16

ombioo said on August 14, 2010, 8:29 am:

Wah baru tau nyang ginian, keren mas..
harus dicoba nih..

#17

Brana said on August 23, 2010, 10:55 am:

idiihhh!! mantap infonya gan!!
om gugel emang keren. ini merupakan solusi bagi para webmaster yang selama ini pusing karena masalah ketersediaan font di kompi client.

#18

sawoblog said on August 23, 2010, 1:00 pm:

Jadi lebih mantap nih websitenya.

#19

Sisy said on September 8, 2010, 12:54 pm:

Lebih mantab nich n prakis

#20

bambang said on September 23, 2010, 7:25 am:

mas di exel 2007 fungsi terbilang gimana ya

#21

Reno Fizaldy said on October 2, 2010, 12:15 am:

Benar2 teknologi yang sangat hebat, dengan begini para web designer tidak perlu susah2 untuk mendesain web mereka dengan font sendiri yang berbasis HTML 5 dan CSS3 yang menurut saya masih belum berkembang dengan pesat di seluruh dunia

#22

Pris said on November 22, 2010, 5:12 pm:

Mas Eko yang baik, terima kasih buat bagi2 informasinya. Saya akhirnya dapat mengunduh Tune Up Utilities 2008. Dan product key-nya dapat dipakai.
Salam,

Pris

#23

antonizer said on January 11, 2011, 12:45 pm:

wah,, kayaknya bagus tuh :)

#24

harijogja said on February 25, 2011, 11:42 am:

wah eko oke nih.. sedot ya ilmunya hehehe

#25

newrule86 said on March 3, 2011, 11:48 pm:

Boleh juga buat yang pengen ‘mempercantik’ blog anda….
Buat yang lainnya, blogku ini sudah cukup cantik atau belum???
Silakan kunjungi

#26

Google Font Directory dan Google Font API | All In One said on April 18, 2011, 12:54 pm:

[...] maseko’s weblog This entry was posted in Antivirus and tagged Directory, Font, Google. Bookmark the permalink. ← HashSlash 1.0 Membuat Tampil Beda Komentar Admin (author) dengan Pengunjung → [...]