Sebagai desainer web atau weblog yang mengandalkan font sebagai thema atau hanya sekedar ingin mengganti atau menambah jenis font yang akan ditampilkan dalam desainnya, bisa menggunakan Google Web Fonts sebagi solusi. Google web fonts merupakan situs penyedia font-font yang sifatnya free, kita bisa menggunakan font-font tersebut secara bebas.
Seiring berjalannya waktu, google web fonts semakin berkembang dengan bertambahnya jenis font dan bentuk-bentuk font yang lebih variatif.
Teknis Penggunaan Google Web Fonts
Menggunakan google web fonts untuk menambah atau mengganti jenis font yang akan dipergunakan pada web atau weblog, bisa mengunjungi langsung situsnya http://www.google.com/webfonts, halaman utamanya sudah langsung menampilkan jenis font beserta contohnya, kalian bisa memilih dan menyortir font-font yang akan dipergunakan.
Setelah memilih font yang dipergunakan, masuk kehalaman berikutnya dengan meng-klik tombol Quick Use, halaman quick use merupakan halaman keterangan bagaimana menggunakan font yang terpilih supaya bisa ditampilkan pada weblog.
Sebagai contoh saya memilih font "Playball", setelah masuk halaman quick use akan disodorkan script link untuk ditempatkan didalam template seperti dibawah ini:
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>letakan script tersebut dibawah <head> atau diatas </head>, script tersebut merupakan link untuk memanggil font.
Save template, font tersebut sudah bisa dipergunakan pada bagian-bagian weblog, baik itu untuk bagian konten, judul post ataupun judul header hanya dengan menambahkan properti font family pada tiap bagian (selektor) yang ingin menggunakannya, sebagai contoh:
.header {
font-family: 'Playball', cursive;
...
<!-- CSS Properti lainnya -->
}1. Walaupun kita bisa menggunakan font-font tersebut sebanyak yang kita mau, kita juga harus memperhatikan kecepatan loading weblog, karena semakin banyak font yang dipergunakan akan semakin menambah beban dalam memuat halaman.
2. Kecepatan loading tiap font berbeda-beda, sebaiknya sebelum menentukan untuk menggunakannya perhatikan kecepatan loadingnya (bisa dilihat pada halaman quick use dengan bentuk gambar speed meter).
3. Sebelum menentukan font yang akan dipergunakan, sebaiknya memelih beberapa font yang memiliki jenis dan bentuk yang hampir sama kemudian perbandingkan untuk mengetahui kecepatan loading font tersebut.
4. Pada source link tidak menggunakan penutup / (slash), jika pada waktu melakukan save tamplate terjadi error, bisa tambahkan tanda / diakhir script, seperti ini:
tapi biasanya pada template blogger hal itu tidak terjadi, blogger akan otomatis menambah tanda /.
2. Kecepatan loading tiap font berbeda-beda, sebaiknya sebelum menentukan untuk menggunakannya perhatikan kecepatan loadingnya (bisa dilihat pada halaman quick use dengan bentuk gambar speed meter).
3. Sebelum menentukan font yang akan dipergunakan, sebaiknya memelih beberapa font yang memiliki jenis dan bentuk yang hampir sama kemudian perbandingkan untuk mengetahui kecepatan loading font tersebut.
4. Pada source link tidak menggunakan penutup / (slash), jika pada waktu melakukan save tamplate terjadi error, bisa tambahkan tanda / diakhir script, seperti ini:
<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'/>tapi biasanya pada template blogger hal itu tidak terjadi, blogger akan otomatis menambah tanda /.
Dengan banyaknya pilihan jenis dan bentuk font pada google web fonts, tentunya memepermudah pengguna untuk memilih dan menggunakan font-font tersebut untuk mendesain web atau weblognya.
makasih bro tutorialnya, udah Saya terapkan nih ! ☺
ReplyDeletemakasih bro infonya, bisa dicoba nih
ReplyDelete