Selasa, 14 Desember 2010

Tutorial Tips Wordpress | Margasatrya.com

Tutorial Tips Wordpress | Margasatrya.com


Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

Posted: 14 Dec 2010 01:24 AM PST

Hai icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya? balik lagi sama saya Graha Nurdian, semoga karena keseringan pembaca di blog mas Satrya ini enggak bosen icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya? . 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 icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya? . Ikuti terus ya artikel ini.

google font api homepage Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

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 icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya? *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 icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

Resource

Google Font Previewer

google font previewer Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

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 icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

Google Font Directory

google font previewer1 Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

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. icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya? lebih mudah kan?

Kesimpulan

Pakai google fonts API itu mudah kok icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya? membuat website anda lebih atraktif dan usable icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya? 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 icon smile Apa itu Google Font API dan Bagaimana Cara Menggunakannya?

Original post from :
Apa itu Google Font API dan Bagaimana Cara Menggunakannya?
Download Free Ebook
Tutorial Tips WordPress | Margasatrya.com

Pengumuman !

Posted: 13 Dec 2010 07:58 PM PST

Pada tulisan singkat ini saya ingin memberi tahukan pada teman-teman yang setia berkunjung dan membaca di blog ini, selama 1 minggu ini mungkin saya tidak akan menulis dulu, dikarenakan beberapa hari ini saya mengadakan inspeksi mendadak pada semua postingan yang ada di blog ini icon mrgreen Pengumuman !

Ternyata banyak artikel-artikel yang rusak, baik karena pergantian plugin pembantu, link-link source/sumber yang mati dan masih banyak lagi. Untuk itu selama 1 minggu ini saya akan memperbaiki dulu seluruh artikel di blog ini agar anda nyaman membaca sebagian atau seluruh artikel di blog ini.

Namun blog ini akan tetap selalu mengupdate artikel, baik 1 hari sekali maupun 2 hari sekali. Dan pengupdatetan artikel tersebut, saya dibantu oleh 2 orang sahabat saya, yaitu Graha Nurdin dan Guusn. Bila anda tertarik untuk menulis disini sebagai guest blogger silahkan membaca terlebih dahulu peraturan dan ketentuannya di halaman Registrasi Guest Blogger.

Atau, saat saya pun sedang mencari beberapa orang/blogger yang ingin bergabung menjadi penulis tetap di blog ini, karena rencana kedepan saya, saya akan menjadikan blog ini menjadi multi author blog. Informasi lebih lanjut silahkan menghubungi saya via YM atau pun melalui email saya. Terima kasih atas perhatiannya, happy reading !

Original post from :
Pengumuman !
Download Free Ebook
Tutorial Tips WordPress | Margasatrya.com

Tidak ada komentar:

Posting Komentar