Font Web kini telah menjadi tren yang populer dalam Web Desain beberapa bulan terakhir ini.
Tehnik @font-face bisa bermasalah saat diterapkan kedalam Blogger template karena tidak semua PC memiliki font tersebut. Tetapi sekarang google telah merilis Api Font, dengan begitu kita dapat menampilkan font font yang tidak standar ke dalam template Blogger dengan mudah.
Tehnik @font-face bisa bermasalah saat diterapkan kedalam Blogger template karena tidak semua PC memiliki font tersebut. Tetapi sekarang google telah merilis Api Font, dengan begitu kita dapat menampilkan font font yang tidak standar ke dalam template Blogger dengan mudah.
Nah, berikut ini adalah penjelasan tentang Google Font Api dan cara menggunakannya di blog berbasis Blogger.
Apa itu Google Font Api ?
Google Font API memungkinkan kita untuk menampilkan font web dalam setiap halaman. Kita bisa memilih untuk menampilkan teks dalam berbagai font web open-source berkualitas tinggi untuk proyek pribadi maupun komersial. Untuk menggunakannya sangat mudah, gratis dan tidak perlu mendaftar.
Font apa yang bisa kita gunakan ?
Semua font yang tersedia dan terdaftar di Google Font Directory dapat kita gunakan. Berikut ini adalah contoh beberapa font yang bisa kita gunakan.
Memang font yang tersedia masih terbatas. Tetapi seiring dengan berjalannya waktu, proyek yang dirintis Google ini pasti akan berkembang karena akan ada banyak pengembang font dan pembuat pembuat font yang akan mulai untuk menambahkan berbagai varian font ke dalam direktori ini.
Bagaimana cara menggunakannya ?
Untuk menggunakan dan menampilkan Google Font API di blog kita sangat mudah dan hanya membutuhkan beberapa menit saja untuk memasangnya.
Yang pertama adalah yang harus dilakukan memilih font yang akan kita gunakan di Google font Directory. Setelah ketemu, klik font yang dipilih untuk melihat preview-nya. Disitu akan ditampilkan bagaimana font tersebut terpasang dalam berbagai ukuran.
Sebagai contoh saya akan menggunakan "Josefin Sans Std Light" oleh Santiago Orozco :
Setelah itu klik pada tab "Get the code" untuk mengambil kode yang kita butuhkan untuk dipasang di template Blogger.
Selanjutnya salin/copy kode embed yang telah disediakan. Sekarang buka Blogger, masuk ke Design -> Edit HTML. Gunakan CTRL + F untuk mencari tag <head>. Setelah ketemu, letakkan kode embed tadi dibawah tag head.
Karena Blogger menggunakan HTML markup yang begitu ketat, untuk itu kita perlu menambahkan garis miring ( / ) sebelum tanda ( > ) dalam script tadi untuk menutup script tersebut / memastikan script tersebut benar benar telah tertutup.
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
Menjadi berikut ini :
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' / >
Setelah itu untuk mengimplementasikannya dalam CSS agar font Josefin Sans Std Light dapat ditampilkan dalam blog kita, kita tinggal menyesuaikannya saja. Misal hanya tulisan dengan tag "h1" yang menggunakan font tersebut maka penulisannya adalah :
h1 { font-family: 'Josefin Sans Std Light', arial, serif; }
Script tersebut kita letakkan diatas tag </b:skin>.
Selesai dan jangan lupa disimpan.
Berikut adalah hasilnya.
Tulisan ini menggunakan font Josefin Sans Std Light yang dibuat oleh Santiago Orozco
*note : Hanya browser yang telah mendukung fasilitas ini saja yang dapat melihatnya.
Sumber : bloggerbuster
Semoga Bermanfaat
*.:｡✿ Don't forget to come back again ✿.｡.:*
*.:｡✿ Don't forget to come back again ✿.｡.:*
Visit Wahyudi Blog !
Tidak ada komentar:
Posting Komentar
Plisss...
Jangan nyepam (spam), jangan promosi (apapun itu), jangan SARA, jangan OOT...
Mohon kerja samanya, berikan komentar yang berbobot dan bermanfaat bagi semua... ^^