Tutorial Tips Wordpress | Margasatrya.com |
| Apa itu Google Font API dan Bagaimana Cara Menggunakannya? Posted: 14 Dec 2010 01:24 AM PST Hai 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
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. KeuntunganKeuntungan 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 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 satuAnda 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 ResourceGoogle 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. KesimpulanPakai google fonts API itu mudah kok Original post from : |
| 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 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 : |
| You are subscribed to email updates from Tutorial Tips Wordpress | Margasatrya.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |



Tidak ada komentar:
Posting Komentar