Selamat Datang

Web Fonts — Cara Kerja, Metode dan Teknik Penggunaannya

Sudah banyak sekali perubahan didunia web, salah satunya dalam cara penggunaan font untuk website.
Kita tidak akan membahas penggunaan font standar (system font) yang otomatis disertakan disetiap komputer, karena itu sangat terbatas jumlahnya dan tentunya kurang bervariasi dan sudah agak bosan juga.

Untungnya sekarang sudah ada teknologi baru yang tersedia, yang memungkinkan kita untuk menggunakan web font yang didesain dengan sangat cantik tanpa perlu membayar (free) dan tentunya ini legal.

Web Fonts

Beberapa Jenis Teknik Penggunaan Web Font

1. Dengan berlangganan (subscribe) pada penyedia Web Font.

Contohnya seperti Typekit atau Font Deck

Prosedur:

  • Buat Akun di website mereka
  • Pilih font yang anda inginkan di library mereka.
  • Web desainer tinggal export potongan kode (code snippet), dan implementasikan ke dalam website.
  • Anda diharuskan membayar untuk berlangganan (subscribe) font tersebut pertahun. Kira-kira harganya sekitar 5 sampai dengan £10 pound per font per tahun nya.

2. Mencari sendiri web font gratis (open license) di situs seperti Font Squirrel

Prosedur:

  • Pilih font yang anda inginkan di library web tersebut
  • Web designer tinggal export kode @fontface dan file font tersebut juga diletakan di folder kerja anda, lalu implementasikan pada website.

Untuk tetap aman dalam masalah hukum maka Anda harus memastikan font yang anda gunakan memiliki lisensi terbuka (open license), yang memungkinkan font tersebut digunakan di website manapun yang anda miliki. Ini dapat ditemukan di situs seperti font squirrel yang 100% gratis untuk penggunaan secara komersial. Selamat!!. Anda diperbolehkan untuk men-download font tersebut, dan anda juga bisa menggunakan nya di photoshop, dan aplikasi lain.

3. Google Font – Free & Open Source

Prosedur:

  • Pilih font yang anda suka dari library mereka (google)
  • Web desainer tinggal copy paste kode yang tertera dan menerapkan di situs anda.

Anda diperbolehkan untuk mendownload font tersebut, jadi anda bisa menggunakan font tersebut di photoshop terlebih dahulu jika anda mendesain web mulai dari photoshop.

Baca Juga:

Metode mana yang akan dipilih?

Keputusan biasaya bermuara pada penyedia mana yang memiliki font yang ingin anda gunakan, jadi intinya tentukan font mana yang ingin anda gunakan, dengan begitu anda tau harus menggunakan metode mana. Berbeda ketika anda memutuskan untuk mencari yang free lalu memilih font-font yang tersedia, jadi dengan begitu berarti pilihan anda lebih sempit. Karena terkadang font yang cocok untuk website anda adalah font yang berbayar. Jadi tentukan dulu Font yang ingin digunakan.

Meskipun @fontface (kode yang digunakan untuk menentukan font di css) sudah didukung oleh kebanyakan browser (asalkan semua format font yang diperlukan tersedia dan ditautkan dengan benar) kadang bagaimana browser me-render font tersebut menjadi sedikit kurang baik, terutama di browser jadul. Terkadang ada font yang ketika ditentukan ukuran size nya menjadi tidak sama hasilnya di beberapa browser, ini biasanya bisa karena proses pembuatan font yang kuran baik, atau kurang nya dots-dots pada font tersebut yang membuat hasil nya jadi kurang oke.
Jadi saran kami selalu uji font yang terlebih dahulu font yang ingin anda gunakan, jangan hanya sekedar melihat display yang menarik lantas anda membeli atau langsung menggunakan pada website anda.

Semoga tulisan ini bisa berguna dan memberi gambaran kepada anda bagaimana menggunakan web font untuk website anda.

Sampai jumpa pada tulisan selanjutnya, salam web design indonesia.





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development