Menggunakan Web Fonts

Menggunakan Web Fonts untuk Mempercantik Blog

Menggunakan Web Fonts adalah salah satu cara kita untuk menampilkan blog kita dengan lebih konsisten. Konsisten dalam artian tampilan hurufnya akan sama, karena dengan menggunakan web fonts huruf yang kita pakai di blog adalah huruf yang ada di Internet.

Dengan menggunakan web fonts kita tidak harus memakai fonts yang ada di komputer/gadget pembaca blog kita. Jadi, andaikan komputer yang digunakan user adalah sebuah MacOSX, Windows 98 atau Windows 8, Fedora Linux atau Ubuntu, tampilan huruf di blog kita akan sama.

Mudeng? Anggap saja demikian ya 😀

Penting ya menggunakan web fonts itu?

Penting nggak peting juga sih, tergantung kita maunya bagaimana, kalau mau blog tampilan hurufnya kosisten ya tidak ada pilihan lain. Tapi ada juga konsekuensinya, yaitu loadingnya akan nambah lama, entah itu seper sekian ribu detik (mili seconds). Berbeda dengan saat kita pasrahkan untuk menggunkan jenis huruf lokal di komputer, misal untuk teks kita pakai “serif” dan untuk heading kita pakai “Sans-serif“.

Menggunakan Web Fonts

Terlepas dari itu semua, saya sendiri melihatnya sebagai sebuah trend yang sudah sangat umum dipakai, bahkan kamu secara sadar atau sadar, baik menggunakan WordPress.com atau Blogger sudah pernah menggunakannya juga sebelumnya. So, menggunakan web fonts is penting banget, titik, dilarang protes lagi 😛

Bagaimana cara menggunakan web fonts?

Kalau kamu menggunakan WordPress.com saya rasa tidak bisa menggantinya sendiri. Kalau kamu menggunakan WordPress Self-hosted seperti saya disini atau juga blogspot, menggunakan web fonts bisa dicoba.

Tapi sebelum melangkah, saya sampaikan, kalau kamu tidak terbiasa dengan mengedit HTML dan CSS, anda perlu perhatian ekstra, biar tidak salah nanti prakteknya.

Kita juga tidak akan menggunakan web fonts yang disediakan Google saja, walaupun memang koleksinya paling banyak, tapi pengguna Google Web fonts juga tidak kalah banyak. Walau resource dan server Google ada dimana – mana, tidak menutup kemungkinan karena saking banyaknya loading fonts dari sana lebih lama. Masih ada penyedia web fonts lainnya seperti Adobe® Edge Web Fonts, Fonts.com dan myfonts.com, webink.com dan masih banyak lagi.

Cara memasukkan web fonts dalam halaman blog;

Dalam memasukkannya, rata – rata sama, walau ada sedikit perbedaan, tapi prinsip dasarnya ada dua langkah, yaitu memanggil webfonts itu dari servernya, lalu mengaplikasikannya dalam CSS themes yang kita pakai.

Kode untuk memanggil web fonts dari servernya, gunakan salah satu cara dari ketiga metode berikut;

<link href="http://fonts.googleapis.com/css?family=Mouse+Memoirs" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//use.edgefonts.net/rosario:n4,i4,n7,i7;league-gothic:n4.js"></script>
@import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs);

Untuk baris pertama dan kedua itu dimasukkan dalam header blog (diantara tag <head> dan tag </head>) lalu yang ketiga dengan dimasukkan dalam file CSS themes kita. Pada contoh itu yang pertama menggunakan Google Web Fonts (CSS), yang kedua menggunakan Adobe Edge Web Fonts (JavaScript).

Sedang cara ketiga kita masukkan di stylesheet (CSS) dari themes yang kita pakai. Biasanya dimasukkan di awal file.

Sedang untuk menggunakan web fonts itu, kita masukkan dalam property CSS kita seperti berikut. misal ini untuk mengatur jenis font di heading dan paragraf.

//heading
h1, h2, h3, h4 {font-family: 'Mouse Memoirs', sans-serif;}
//paragraf
p{font-family:'Rosario', serif;}

Perbedaan penyedia web fonts

Untuk Google Web fonts dan Adobe memberikan layanan untuk menggunakan web fonts ini secara cuma – cuma. Meski Adobe mempunyai produknya yang serupa tapi berbayar, typekit. Typekit, bisa dicoba untuk 1 website dengan 2 fonts, jumlah view per bulan dibawah 25.000.

Sedang Fonts.com dan saudaranya myfonts.com memeberi peluang untuk mencoba layanannya dengan free account, dengan batas maksimal 25.000 page view dalam sebulan. WebInk di lain sisi memberikan peluang dengan lebih banyak view, karena WebInk membatasi hingga 25.000 Visitor, bukan viewer halaman.

Kebanyakan website penyedia web fonts tersebut juga bisa kita gunakanuntuk berburu font gratis, walau ada font yang berbayar sekalipun, dalam satu keluarga/bundling ada versi yang gratis juga, katakanlah keluarga Museo.

Web fonts apa yang saya pakai?

Sebelum menulis posting ini, saya dari kemarin sudah mencoba – coba bereksperimen untuk menggunkan web fonts yang berbeda dari yang sebelumnya saya pakai. Kalau sebelumnya saya menggunakan web fonts dari Google, sekarang saya mencoba web fonts dari Adobe.

Saya tahu ini adalah sebuah toturial basic, singkat dan kurang detil. Tapi tujuan utama posting ini memang untuk pengenalan dan juga membuka wawasan bagi yang sudah tahu, kalau penyedia web fonts itu ternyata sekarang makin banyak.

Kalau ada yang tertarik sah – sah saja nanti ditanyakan di komentar kok 🙂

4 thoughts on “Menggunakan Web Fonts untuk Mempercantik Blog

  1. Kalau saya masih biasa menggunakan kode css untuk menentukan font family pada bagian yg mau saya atur jenis tulisannya dan untuk metode yang mas udah sebutin di atas, cuman metode pertama yang pernah saya coba tapi nda lama kemudian cara tsb saya tinggalkan dan saya hapus pada bebrapa blog saya. Tapi kayaknya bisa juga tuh untuk saya praktekkan di blog2 demo saya. Makasih atas informasinya mas.

Comments are closed.