Cara Menggunakan Google Fonts dengan Benar Tanpa Membuat Web Lemot

Font Keren Bisa Jadi Beban

Google Fonts adalah surga bagi para desainer dan *frontend developer*. Menyediakan ribuan font gratis yang bisa dipakai dengan satu baris kode. Namun, memuat file font (Typography) dari server Google membutuhkan waktu, dan hal ini sering kali menyebabkan Flash of Unstyled Text (FOUT)—kondisi di mana teks website-mu awalnya tampil jelek, lalu beberapa detik kemudian berubah menjadi font yang benar.

Kesalahan Umum: Menggunakan @import di CSS

Banyak pemula yang memilih metode @import untuk memasukkan Google Fonts karena terlihat lebih rapi karena langsung ditaruh di file CSS.

/* JANGAN LAKUKAN INI! */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

Mengapa buruk? Metode @import memblokir proses rendering browser. Browser harus selesai mendownload file CSS-mu terlebih dahulu, BARI menyadari ada perintah untuk mendownload font, sehingga proses download-nya berjalan bergantian (lambat).

Cara Terbaik: Gunakan Tag dengan Preconnect

Cara paling optimal yang disarankan oleh Google sendiri adalah meletakkan pemanggilan font langsung di dalam tag pada file HTML-mu, mendahului file CSS milikmu.

<!-- 1. Beritahu browser untuk bersiap konek ke server Google sejak awal -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- 2. Panggil Font-nya -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

<!-- 3. Baru panggil CSS milikmu -->
<link href="style.css" rel="stylesheet">

Rahasia Fitur 'display=swap'

Perhatikan URL font di atas. Di bagian paling belakang terdapat parameter &display=swap. Apa fungsinya?

Jika internet pengunjung sedang lambat dan font Roboto belum selesai didownload, browser tidak akan menyembunyikan teksmu (layar kosong). Browser akan langsung menampilkan teks menggunakan font standar (seperti Arial). Saat font Roboto selesai di-download, barulah font tersebut di-"tukar" (swap) secara halus. Ini memastikan teks di websitemu selalu bisa dibaca sejak detik pertama!

Pilih Ketebalan (Weight) Seperlunya

Jangan menceklis semua varian ketebalan (Bold, Italic, Light, Extra Bold) di Google Fonts jika kamu tidak memakainya! Setiap varian ketebalan adalah satu file font utuh. Jika kamu hanya butuh teks Normal (400) dan Tebal (700), maka centanglah dua itu saja agar kuota pengunjung tidak terkuras.