Font Web yang Cepat: Cara Memuat Font Tanpa Memperlambat Website

Q: Apa bedanya font-display swap dan optional?

Dengan swap, teks langsung tampil memakai font cadangan lalu berganti ke font utama setelah selesai diunduh. Dengan optional, browser hanya memakai font utama jika tersedia sangat cepat, sehingga pergeseran tata letak lebih kecil tetapi pengunjung bisa melihat font cadangan pada kunjungan pertama.

Diperbarui 16 Oktober 2026 · ±6 menit baca

Font yang menarik membuat website terlihat profesional, tetapi font web juga bisa memperlambat halaman. Teks mungkin tidak terlihat sampai font selesai diunduh, atau tampilan bergeser ketika font cadangan diganti font asli. Dengan pengaturan yang tepat, Anda bisa memakai font pilihan tanpa mengorbankan kecepatan.

Masalah yang sering muncul

FOIT (Flash of Invisible Text) – teks tidak terlihat selama font diunduh. Pada koneksi lambat, pengunjung melihat halaman tanpa tulisan.
FOUT (Flash of Unstyled Text) – teks tampil dengan font cadangan dulu, lalu berganti ke font asli. Ini lebih baik daripada teks tak terlihat, tetapi bisa menyebabkan pergeseran tata letak jika ukuran kedua font berbeda.
Terlalu banyak file font – setiap ketebalan dan gaya (regular, italic, bold, semibold) adalah file terpisah.
Koneksi tambahan ke server pihak ketiga, misalnya Google Fonts, sebelum font bisa diunduh.

1. Pertimbangkan font sistem

Pilihan tercepat adalah tidak memuat font sama sekali. Font sistem sudah terpasang di perangkat dan tampil instan:

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Tampilannya modern dan bersih di setiap perangkat. Banyak website besar memakai pendekatan ini untuk teks isi, dan hanya memakai font khusus untuk judul atau logo.

2. Gunakan format WOFF2

WOFF2 adalah format font web paling efisien dan didukung oleh semua browser modern. Format lama seperti TTF, EOT, dan SVG font umumnya tidak lagi diperlukan. Jika penyedia font memberikan beberapa format, cukup sajikan WOFF2.

3. Batasi jumlah varian

Setiap varian adalah unduhan baru. Tanyakan apakah Anda benar-benar membutuhkan lima ketebalan. Sering kali regular (400) dan bold (700) sudah cukup. Alternatifnya, gunakan variable font: satu file yang mencakup rentang ketebalan, sangat menguntungkan jika Anda memakai banyak varian.

4. Gunakan font-display

Properti font-display di @font-face mengatur apa yang terjadi selama font diunduh:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

swap – tampilkan font cadangan segera, lalu ganti setelah font asli siap. Mencegah teks tak terlihat.
optional – jika font tidak siap dalam waktu sangat singkat, browser tetap memakai font cadangan untuk kunjungan itu. Mencegah pergeseran sepenuhnya, cocok jika font bukan hal krusial.
fallback – kompromi di antara keduanya.

Lighthouse menandai font tanpa pengaturan ini dengan saran "Pastikan teks tetap terlihat selama pemuatan font web". Jika memakai Google Fonts, tambahkan &display=swap di URL-nya.

5. Preload font yang paling penting

Browser baru mengetahui font dibutuhkan setelah mengunduh dan membaca CSS. Dengan preload, unduhan dimulai lebih awal:

<link rel="preload" href="/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>

Atribut crossorigin wajib ada untuk font, bahkan jika font berada di domain sendiri. Preload hanya satu atau dua font yang dipakai di layar pertama. Terlalu banyak preload justru bersaing dengan sumber lain yang lebih penting, seperti gambar LCP.

6. Host font sendiri

Memuat dari Google Fonts berarti browser harus menghubungi domain fonts.googleapis.com untuk CSS, lalu fonts.gstatic.com untuk file font. Browser modern juga tidak lagi berbagi cache font antar situs, jadi pengunjung tidak mendapat keuntungan meskipun situs lain memakai font yang sama.

Menyimpan font di server sendiri (self-hosting) menghilangkan koneksi tambahan dan memberi Anda kendali penuh atas cache dan preload. Anda bisa mengunduh file font dari repositori resmi atau alat seperti google-webfonts-helper, lalu menulis @font-face sendiri. Di WordPress, beberapa plugin dan tema menyediakan opsi untuk memuat Google Fonts secara lokal. Pastikan lisensi font mengizinkan self-hosting; font dari Google Fonts umumnya berlisensi terbuka.

Jika tetap memakai Google Fonts, tambahkan preconnect:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

7. Subsetting

Font lengkap sering berisi ribuan karakter untuk banyak bahasa. Untuk website berbahasa Indonesia, karakter Latin dasar biasanya sudah cukup. Subsetting membuang karakter yang tidak dipakai sehingga file jauh lebih kecil. Google Fonts melakukannya otomatis dengan unicode-range. Untuk font sendiri, alat seperti pyftsubset dari paket fonttools bisa membuat subset:

pyftsubset Inter.ttf --unicodes="U+0000-00FF,U+2013-2014,U+2018-201D,U+20AC" --flavor=woff2 --output-file=inter-latin.woff2

Hati-hati jika website menampilkan nama atau konten dari bahasa lain; pastikan karakter yang diperlukan tetap ada.

8. Kurangi pergeseran saat font berganti

Jika font cadangan dan font asli memiliki ukuran yang berbeda, teks akan "melompat" saat font berganti dan menambah CLS. CSS modern menyediakan properti size-adjust, ascent-override, dan descent-override untuk menyesuaikan font cadangan agar ukurannya mendekati font asli. Beberapa framework, seperti Next.js, melakukannya otomatis.

9. Ikon font

Ikon font seperti versi lama Font Awesome sering memuat ratusan ikon padahal yang dipakai hanya beberapa. Ganti dengan ikon SVG inline atau sprite SVG yang hanya berisi ikon yang Anda gunakan.

Daftar periksa

Gunakan font sistem jika memungkinkan.
Sajikan hanya WOFF2.
Batasi varian atau gunakan variable font.
Tambahkan font-display: swap atau optional.
Preload font utama dengan crossorigin.
Host font sendiri dan gunakan subset.
Ganti ikon font dengan SVG.

Setelah menerapkannya, uji ulang halaman di webmaster.my.id dan perhatikan FCP, LCP, dan CLS. Untuk optimasi lain, lihat Mengurangi CSS/JS dan Render-blocking.

Contoh konfigurasi font yang ringan

Misalnya situs memakai satu keluarga font untuk teks dan judul. Alih-alih memuat enam varian dari layanan eksternal, cukup host dua file WOFF2 sendiri, yaitu reguler dan tebal, lalu tulis:

<link rel="preload" href="/fonts/inter-400.woff2" as="font" type="font/woff2" crossorigin>
<style>
@font-face{font-family:Inter;src:url(/fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
</style>

Hanya font yang paling penting yang di-preload. Atribut crossorigin tetap diperlukan untuk preload font meskipun file berada di domain yang sama.

Checklist lengkap font cepat

Jumlah keluarga font dibatasi, idealnya satu atau dua.
Hanya varian berat dan gaya yang benar-benar dipakai yang dimuat.
Semua font memakai format WOFF2.
font-display: swap atau optional diatur pada setiap @font-face.
Satu atau dua font terpenting di-preload, tidak lebih.
Font cadangan dalam font-family ukurannya mirip dengan font utama.
Ikon memakai SVG, bukan satu file ikon font besar.
File font disajikan dengan header cache yang panjang.

Kesalahan umum

Memuat seluruh varian dari Google Fonts. Setiap varian adalah file terpisah yang harus diunduh.
Lupa crossorigin pada preload font. Browser akan mengunduh font dua kali.
Preload semua font. Font yang di-preload bersaing dengan gambar LCP dan CSS penting.
Memakai ikon font hanya untuk beberapa ikon. File ikon font bisa berukuran puluhan kilobita, padahal beberapa SVG kecil sudah cukup.
Mengabaikan lisensi. Pastikan font yang di-host sendiri mengizinkan penggunaan web.

Pertanyaan yang sering diajukan

Apakah Google Fonts memperlambat situs?

Google Fonts cukup cepat, tetapi memerlukan koneksi ke domain lain untuk CSS dan file font. Meng-host font sendiri menghilangkan koneksi tambahan itu dan memberi kendali penuh atas cache serta preload.

Apa bedanya font-display swap dan optional?

Dengan swap, teks langsung tampil memakai font cadangan lalu berganti ke font utama setelah selesai diunduh. Dengan optional, browser hanya memakai font utama jika tersedia sangat cepat, sehingga pergeseran tata letak lebih kecil tetapi pengunjung bisa melihat font cadangan pada kunjungan pertama.

Apakah font variabel lebih baik?

Font variabel menggabungkan banyak berat dalam satu file. Jika Anda memakai banyak varian, satu font variabel bisa lebih hemat. Jika hanya memakai satu atau dua berat, file statis biasanya lebih kecil.

Bagaimana cara melihat font apa saja yang dimuat?

Buka DevTools, pilih tab Network, lalu filter dengan jenis Font. Anda akan melihat setiap file font, ukurannya, dan dari mana file itu dimuat.

Apakah font sistem terlihat kurang profesional?

Tidak. Banyak situs besar memakai font sistem karena tampil rapi dan langsung tersedia tanpa unduhan. Font sistem juga terasa familiar karena sama dengan tampilan aplikasi di perangkat pengunjung.

Apakah perlu preload jika font sudah di-cache?

Pada kunjungan berikutnya font diambil dari cache sehingga preload tidak terlalu berpengaruh. Preload terutama membantu kunjungan pertama, saat browser belum memiliki file font tersebut.