Apa Itu Webfont dan Mengapa Perlu Digunakan?
Webfont adalah file font yang dikirim website kamu ke browser pengunjung. Dengan begitu, teksmu tampil sesuai desainmu, meskipun pengunjung belum pernah memasang font tersebut.
Cara kerja webfont
Saat seseorang membuka halamanmu, browser membaca CSS kamu, melihat font apa yang dibutuhkan, lalu mengunduh filenya dari server kamu. Setelah itu, browser menampilkan teks dengan font tersebut. Semua proses ini berjalan otomatis, dan pengunjung tidak perlu memasang apa pun.
Webfont atau system font?
System font sudah ada di perangkat pengunjung, misalnya Arial, Georgia, atau San Francisco. Karena tidak perlu diunduh, system font adalah pilihan tercepat. Kekurangannya, tampilannya bisa berbeda di setiap perangkat, dan sedikit sekali yang cocok dengan brand kamu.
- Pilih webfont jika brand, judul, atau desainmu bergantung pada jenis huruf tertentu.
- Pilih system font jika kecepatan adalah yang utama, misalnya di dashboard atau alat internal.
- Gabungkan keduanya dengan memakai webfont untuk judul dan system font untuk teks isi.
Berapa biaya webfont untuk kecepatan?
Setiap file font adalah satu unduhan tambahan, dan teks bisa muncul terlambat atau bergeser saat file masih dimuat. Webfont yang disiapkan dengan baik akan membuat biaya ini tetap kecil. Gunakan WOFF2, hapus karakter yang tidak kamu perlukan, dan muat hanya ketebalan yang benar-benar kamu pakai. Panduan kami tentang cara membuat webfont lebih cepat dimuat membahas setiap langkahnya.
Self-hosted atau layanan font?
Layanan seperti Google Fonts dan Adobe Fonts menyimpan file font untuk kamu. Self-hosting berarti kamu menyimpannya sendiri di server milikmu. Dengan cara ini, kamu punya kendali atas caching dan kecepatan, serta browser pengunjung tidak perlu menghubungi pihak ketiga. Hal ini bisa penting untuk privasi: pada 2022, pengadilan Jerman memutuskan melawan sebuah situs yang memuat Google Fonts dari server Google tanpa persetujuan.
Sebelum melakukan self-hosting, baca lisensi font tersebut. Panduan kami tentang lisensi webfont menjelaskan apa saja yang perlu kamu perhatikan.
Memulai
Pilih font yang kamu punya lisensi untuk digunakan, lalu proses melalui Webfont Generator. Kamu akan mendapatkan file dan CSS yang siap untuk web, dan panduan kami menunjukkan cara menambahkannya ke website kamu.
