Saturday, May 29, 2010

Cara Menggunakan API Google Font Pada Blogger

Terlebih dahulu apa itu yang dimaksudkan dengan Font API Google?. Font API Google membolehkan kita untuk memaparkan font web dalam setiap laman web. Kita boleh memilih untuk memaparkan teks dalam pelbagai font open-source web berkualiti tinggi untuk kedua-dua projek peribadi dan komersial. Tiada pendaftaran yang diperlukan, dan ianya sangat berguna dan mudah untuk dipasangkan. Semua font sedia untuk digunakan dengan API yang berdaftar di Google Direktori Font. Berikut beberapa contoh gambar gaya yang boleh anda gunakan.

Cara menggunakan API Google Font :

Menggunakan Google Font API untuk memaparkan non-standard font adalah sangat mudah, dan hanya memerlukan beberapa minit untuk menyiapkan. Pertama, anda perlu memilih memilih font yang hendak anda gunakan dari Google Direktori Font. Klik pada font yang anda ingin gunakan dan anda akan dibawa ke halaman yang memaparkan font dalam berbagai saiz.

Sebagai contoh aku gunakan font Josefin Sans Std Light oleh Santiago Orozco

Sekarang klik pada tab "Get the code" untuk menghasilkan kod yang diperlukan bagi meletakkannya pada blogger template anda.

Salin kod embed ke clipboard atau paste ke editor teks anda untuk digunakan nanti. Sekarang pergi ke Layout > Edit HTML pada dashboard blogger anda, dan dengan menggunakan fungsi carian pada pelayar anda carikan tag pembuka <head>. Masukkan kod embed selepas baris ini. Anda juga perlu menambah garis palang sebelum penutup simbol ">" dalam kod anda. Lihat contoh dibawah.

Sebelum :

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>

Selepas :

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'/>

Seterusnya cari kod font didalam template anda dan gantikan dengan nama Josefin Sans Std Light dimana anda boleh menggunakannya sebagai font body dan juga font header.

Setelah siap hanya savekan tekan butang save template dan lihat hasilnya.

Sebelum :

Selepas :

Maklumat lebih lanjut tentang Google API Font :

- Laman utama Google Font API
- Langkah permulaan dengan Font API
- Google Web Font FAQ
- Cara menggunakan API font baru Google (DesignShack)


Nota : Bagaimana dengan API Google Font baru ini. Dah pakai?. Korang suka x?

If you think this entry useful, just click Facebook Like button bellow :
blog comments powered by Disqus
Related Posts with Thumbnails