Memilih dan Menggunakan Font
Pemilihan font sangat mempengaruhi kesan dan performa website. Ada 2 pendekatan utama: system fonts dan custom fonts.
System Font Stack
System fonts adalah font yang sudah terinstall di device pengguna — tidak perlu download, loading instan.
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif;
}
Atau lebih singkat di CSS modern:
body { font-family: system-ui, sans-serif; }
Kelebihan:
- Zero loading time — langsung render
- Familiar — pengguna sudah terbiasa dengan font device mereka
- Performa terbaik — tidak ada network request untuk font
Kapan pakai: Dashboard, admin panel, aplikasi web, tool internal.
Custom Fonts (Google Fonts, dll)
Custom font memberikan identitas visual yang unik:
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
body { font-family: "Inter", system-ui, sans-serif; }
Yang perlu diperhatikan:
font-display: swap— tampilkan system font dulu, ganti setelah custom font selesai loading- Batasi weight yang diload — setiap weight = request tambahan. Load hanya yang dibutuhkan (400, 500, 700)
- FOUT (Flash of Unstyled Text) — saat custom font belum loading, teks muncul dengan system font dulu. Ini normal dan lebih baik dari FOIT (invisible text)
Font Populer untuk Web
| Font | Karakter | Cocok untuk |
|---|---|---|
| Inter | Clean, modern | UI, dashboard, SaaS |
| Plus Jakarta Sans | Friendly, rounded | Marketing, startup |
| DM Sans | Geometric, minimal | Tech, modern brands |
| Geist | Sharp, technical | Developer tools |
Tips Performa
- Self-host font jika memungkinkan (lebih cepat dari Google Fonts CDN)
- Preload font kritis —
<link rel="preload" href="font.woff2" as="font" crossorigin> - Format WOFF2 — format paling kecil dan didukung semua browser modern
- Subset font jika hanya butuh karakter Latin — bisa mengurangi ukuran 70%+
GitHub, Vercel, dan Linear semuanya menggunakan system font stack atau self-hosted font untuk performa optimal.
