Cara Menggunakan Font dari Google Fonts di HTML

Halo guys, Kembali lagi bersama Miniblog dari Inzaghi's Blog! Kali ini kita akan memberikan Tutorial Singkat mengenai Cara Menggunakan Font dari Google Fonts di HTML. Biasanya, Google Fonts ini digunakan untuk Penggunaan Aplikasi Web, Mobile, bahkan Lintas Platform. Bahkan, kita juga bisa mengunduhnya (Download) Font yang ada di Google Fonts.

Sumber : Medium.com (@codex & @euricopaes), Support.Gainsight.com, dan Sko.dev

Tipografi merupakan elemen penting dalam desain web, dan penggunaan font kustom dapat membantu membangun identitas visual yang khas untuk sebuah website. Dalam panduan ini, akan dijelaskan cara menggunakan font dari Google Fonts maupun font lokal (format TTF) di dalam proyek Anda. Di akhir pembahasan, Anda akan memiliki konfigurasi HTML dan CSS yang siap digunakan dengan font kustom yang dimuat secara optimal dan efisien.

Google Fonts merupakan kumpulan lebih dari 800 jenis huruf gratis yang disediakan oleh Google untuk kebutuhan developer web dan desainer. Salah satu keunggulannya adalah font-font tersebut dapat diakses kapan saja dan dari mana saja selama tersedia koneksi internet. Jika kamu ingin memperindah tampilan website dengan pilihan tipografi yang beragam dan menarik, Google Fonts bisa menjadi solusi yang tepat. Berikut ini langkah-langkah penggunaan Google Fonts melalui CSS.

Berikut ini adalah Cara Menggunakan Font dari Google Fonts di HTML.

Pertama, carilah Google Fonts atau klik di sini (fonts.google.com).

Maka, Tampilannya seperti ini, dan carilah di Kolom Search atau Pilih Font yang tersedia pada Tampilan Awal di Google Fonts.

Misalnya, saya cari Font Inter dan ketiklah "Inter" dan ketemulah dengan Font Inter.

Kemudian, klik saja "Get Font" untuk mendapatkan Font.

Jika sudah, langsung saja klik "Get Embed Code". Anda juga bisa mengunduh Font tersebut dengan mengeklik "Download All".

Jika sudah membuka dan mengeklik "Get Embed Code", maka akan menampilkan semua Kode Program, baik itu dalam HTML/CSS (Web), Android, iOS, bahkan juga tersedia dengan menggunakan Flutter.

Namun, kita Copy saja Kode bagian HTML saja.

Lalu, bukalah Code Editor apapun, misalnya VS Code. Inilah Contoh dari Kode HTML dan CSS.

HTML :

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap"
  rel="stylesheet"
/>

CSS :

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

Setelah itu, maka akan seperti ini hasilnya :

Mohon maaf apabila ada kesalahan sedikit pun pada Tutorial ini.

Terima Kasih 😀😊😘👌👍 :)