Disini saya hanya ingin menjelaskan apa sih bedanya font untuk PC/Laptop/Mac, kita sebut sebagai desktop font dengan font untuk web webfont ?

Lalu dimana letak perbedaannya ?

Desktop Font adalah font yang di install di komputer anda dan dapat digunakan di aplikasi yang terinstall di komputer. Misal, Adobe Photoshop, Microsoft Office dsb. Ekstensi font yang digunakan untuk desktop font ini adalah .ttf, .otf, .suit (khusus untuk Mac).

Webfont adalah font yang digunakan untuk website dapat dipanggil dengan rule css @font-face. Webfont terdiri dari empat tipe ekstensi, True Type Font (.ttf), WOFF file, EOT file, dan SVG file. Semuanya harus dipakai karena masing-masing browser menggunakan tipe yang berbeda.

Bagaimana bila website yang kita bangun menggunakan desktop font ?

Tentu saja bisa, tetapi desktop font yang digunakan untuk website tersebut hanya akan berlaku di masing-masing komputer yang terinstall font tersebut.

Karena bila tidak, maka font tidak  akan sesuai.

Contoh. 
body menggunakan font family Helvetica kemudian variannya sans-serif (bila helvetica tidak ada);

body{
    font-family:"Helvetica", sans-serif;
}

Komputer A menginstall font Helvetica,
sementara Komputer B tidak ada font tersebut,
Lalu website yang dibangun menggunakan font Helvetica.
maka website yang tampil dengan font Helvetica hanya di komputer A.
dan Komputer B akan mengambil default font yang ada 
dikomputer tersebut dengan varian sans-serif.

Di sinilah Webfont berperan, bagaimana cara menggunakan webfont ?

Banyak cara menggunakan webfont, saya sendiri lebih sering menggunakan Google Fonts, karena open source dan kualitasnya tidak mengecewakan. Contoh. Open Sans, Roboto, etc.

Pertanyaan berikutnya, apakah font yang terinstall di komputer bisa kita rubah menjadi webfont, misal font Myriad ?

Jaweabannya : Tentu saja bisa menggunakan webfont generator, banyak beredar anda bisa googling.

Tetapi saya tidak menyarankan penggunaan webfont generator yang gratis, karena hasilnya tidak akan maksimal, apalagi kerning, font-size, etc, lebih sering berubah tidak sesuai standar, misal kita pakai ukuran body 14px setelah digenerate 14px bisa lebih kecil, karena belum teroptimize dengan baik dibanding webfont yang sudah digenerate oleh Google Fonts.

Untuk soal font anda bisa tanya yang lebih ahli ke font designer.

Dari segi lisensi juga, font tersebut hanya bisa digunakan untuk komputer saja. Contoh : Helvetica, Myriad. Font tersebut bukan font open source atau gratis yang bisa digunakan oleh Web.

Cara menggunakan webfont dengan css:

@font-face { 
   font-family: 'Webfont'; 
   src: url('webfont.eot'); /* IE9 Compat Modes */ 
   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
   url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
   url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
   url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
   url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Lalu bagaimana bila klien atau anda sendiri ingin menggunakan font-font yang terinstall di komputer untuk project website anda?

Jawabannya :

  1. Anda bisa mencari alternative lain di google fonts, atau
  2. Anda menggunakan Adobe Font, font-font premium yang terdapat di komputer sudah banyak tersedia diAdobe Font dan sudah menjadi webfont, hanya saja layanan tersebut premium dan berbayar. Tetapi bila anda sudah menggunakan Photoshop yang bukan bajakan, anda sudah bisa menggunakan Adobe Font secara gratis.

Berikut link cara menggunakan Google Fonts dan Adobe Font

Semoga penjelasan ini bermanfaat.

Jadi bila kalian designer, klien atau business owner dan ingin membuat website,

Jangan ada lagi yang bilang ke Web Developer,

Fontnya kan sudah dikirim sekalian desainnya, kok di website beda ya..

Hello plissss, ini font yang dikirim dari ente, buat buka file desain ente biar ga berubah dikomputer ane,

bukan buat text di website.

kalo masih kaya begini, baca kembali dari atas sampai ketemu baris ini lagi. 😀