Cara Download Font di Google Fonts

Artikel ini akan membahas tentang Klasifikasi Jenis Font, Cara Mendownload Font di Google Fonts, Menginstallnya di Windows 10, dan Memasangnya di Website kita.

cara download font di google fonts

Font adalah desain grafis yang diterapkan pada kumpulan angka, simbol, dan karakter. Font menentukan ciri seperti jenis huruf, ukuran, jarak, dan pitch. Font digunakan untuk mencetak teks pada berbagai perangkat output dan untuk menampilkan teks di layar. Font memiliki gaya font seperti italic (miring), bold (tebal), dan bold italic (tebal miring).

Google Fonts merupakan layanan dari Google yang menyediakan Font secara online melalui CDN dan bahkan kita bisa mendownload Font disana secara gratis dan tidak dibatasi, karena di Google Font, semua Font berlisensi Open Source.

Nah, pada artikel kali ini, saya akan memberikan penjelasan singkat tentang jenis-jenis font, tips memilih font, langkah-langkah bagaimana cara mendownload Font di Google Fonts, serta memasang font tersebut di windows dan website.

Jenis-jenis Font dan Klasifikasi-nya

Secara garis besar, jenis font dapat dibagi menjadi 5 jenis berdasarkan gaya dan ciri khas setiap font-nya, berikut ke-5 penjelasannya.
  • Serif; jenis font ini memiliki ciri khas berupa garis kecil (kait) di bagian ujung setiap huruf. Sangat cocok digunakan untuk paragraf atau judul.
  • Sans Serif; jenis font ini adalah kebalikan dari Serif, karena di bagian ujung setiap huruf tidak terdapat garis kecil (kait). Sangat cocok digunakan untuk paragraf atau judul.
  • Display; disebut juga dengan Decorative, memiliki ciri yaitu ukurannya yang besar. Sangat cocok digunakan untuk judul atau tipografi pada desain.
  • Handwriting; dikenal juga dengan Script, didasarkan dari bentuknya yang hampir menyerupai tulisan tangan huruf bersambung. Cocok untuk tipografi desain.
  • Monospace; memiliki spasi jarak horizontal dengan ukuran yang sama antara semua huruf. Biasa ditampilkan untuk penulisan kode (source code).
Untuk contoh dan pembagian yang lebih jelas, bisa membuka referensi [2].

Tips Memilih Font

Font yang bagus adalah yang mudah dibaca, jelas, dan tidak melelahkan mata.
Terkait tentang penerapannya pada website; berikut beberapa tips dalam memilih font.
  • Batasi font dalam satu website agar tidak lebih dari 3 font.
  • Kecocokan antara font yang satu dengan font yang lain.
  • Pertimbangkan ukuran font.
  • Konsisten di setiap browser.

Cara Mendownload Fonts di Google Fonts

Catatan:
Gambar pada bagian ini adalah tampilan dari website Google Fonts yang lama, untuk mendownload keseluruhan ukuran dan gaya tulisan secara mudah, tinggal klik pada tombol Download Family di bagian atas kanan setiap laman.
  1. Buka Website Google Fonts,
  2. Search atau pilih font yang sedang trending,
  3. Untuk memilih font yang akan didownload, klik pada tombol + berwarna merah di sebelah kanan atas nama font-nya,
  4. Akan muncul sebuah dialog di bagian bawah, klik pada judul 1 Family Selected, untuk menampilkan pilihan style font yang akan kita download,
  5. Jika sudah memilih font yang akan didownload, tekan tombol Download di kanan atas dialog tersebut,
  6. Dan selesai, Demikian,

Cara Menginstall Google Fonts di Windows

  1. Buka font yang telah didownload.
  2. Klik dua kali setiap file ber-ekstensi .ttf.
  3. Klik Install di bagian atas jendela.
  4. Tunggu hingga loading instalasi selesai.
  5. Dan Font tersebut sudah bisa digunakan di setiap aplikasi Windows.

Cara Memasang Google Fonts di Website

cara embed google font di website
  1. Masih di Website Google Fonts.
  2. Pilih jenis font yang akan dipasang di website.
  3. Buka Font tersebut.
  4. Jika ada beberapa pilihan atau gaya tulisan, silakan pilih hanya yang dibutuhkan saja dengan cara klik tombol Select this style.
  5. Jika font dirasa terlalu banyak, bisa menghapus daftar tersebut dengan cara klik tombol Remove this syle.
  6. Setelah itu klik tab menu Embed pada sidebar yang muncul di bagian kanan laman.
  7. Pilih metode <link>.
  8. Copy kode di bawahnya, lalu paste di dokumen HTML yang diinginkan, tepatnya di bagian <head> ... </head>.
  9. Untuk mengganti keseluruhan jenis font yang digunakan pada sebuah website dengan format sebagai berikut:
    body .page #page1 {
     font-family:'Caveat',cursive;
    }
    Ganti kode yang ditandai dengan tag html, class, atau id yang akan diganti font-nya.
  10. Simpan dokumen tersebut dan lihat hasilnya.

Video Tutorial Tentang Google Fonts

Untuk praktik yang lebih jelas, bisa menyimak video tentang Google Fonts di bawah ini.



Demikian tutorial kali ini, Semoga bermanfaat.


Referensi:
[1] https://fonts.google.com
[2] https://www.toptal.com/designers/typography/typeface-classification

Posting Komentar