Import Custom Fonts: Google Fonts vs @font-face
Secara bawaan, website hanya bisa menampilkan font yang sudah terinstal di perangkat pengguna (seperti Arial atau Times New Roman). Untuk menggunakan font keren seperti Inter, Poppins, atau Playfair Display, kita perlu mengimpornya.
1. Menggunakan Google Fonts (Cara Termudah)
Google Fonts adalah layanan gratis yang menyediakan ribuan font siap pakai tanpa perlu mendownloadnya ke server kita.
Langkah-langkah:
-
Buka f onts.google.com.
-
Pilih font yang Anda suka (misal: Poppins).
-
Pilih gaya (Weight) yang dibutuhkan (misal: Regular 400 dan Bold 700).
-
Copy link yang disediakan dan tempel di dalam tag HTML Anda.
Contoh Implementasi:
<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=Poppins:wght@400;700&display=swap" rel="stylesheet"> <style> body { font-family: 'Poppins', sans-serif; }
style>
2. Menggunakan @fo nt-face (Kontrol Penuh)
Metode ini digunakan jika Anda memiliki file font sendiri (format .ttf, .otf, .woff, atau .woff2) atau jika Anda ingin website tetap menampilkan font kustom tanpa bergantung pada koneksi internet ke server Google.
Langkah-langkah:
-
Simpan file font di folder proyek Anda (misal:
/fonts/). -
Gunakan aturan
@font-facedi bagian paling atas file CSS.
Contoh Kode:
/* 1. Deklarasi Font */
@font-face { font-family: 'MyCustomFont'; src: url('fonts/my-font.woff2') format('woff2'), url('fonts/my-font.woff') format('woff'); font-weight: normal; font-style: normal;
} /* 2. Penggunaan */
h1 { font-family: 'MyCustomFont', Fallback, sans-serif;
}
3. Format File Font yang Harus Diketahui
Tidak semua format font cocok untuk web. Berikut urutan prioritasnya:
-
WOFF2 (Web Open Font Format 2.0): Format terbaik karena memiliki kompresi tertinggi (ukuran file paling kecil).
-
WOFF: Standar lama yang masih didukung luas.
-
TTF/OTF: Format umum, biasanya ukuran filenya lebih besar dibanding WOFF2.
Tutorial: Optimasi Font agar Website Tetap Cepat
Mengimpor terlalu banyak font bisa memperlambat loading website. Berikut tipsnya:
-
Pilih Gaya Seperlunya: Jangan centang semua weight (100 hingga 900) di Google Fonts. Pilih 2-3 saja (misal: 400 untuk teks, 700 untuk judul).
-
Gunakan
font-display: swap: Pastikan teks langsung muncul menggunakan font bawaan sistem sambil menunggu font kustom selesai di-download. Google Fonts sudah menyertakan ini secara otomatis di link-nya. -
Host Lokal untuk Privasi: Jika Anda membangun aplikasi untuk perusahaan yang ketat soal privasi data, gunakan
@font-faceagar browser user tidak perlu melakukan permintaan (request) ke server Google.
Praktik Terbaik:
@font-face { font-family: 'BrandFont'; src: url('/fonts/brand.woff2') format('woff2'); font-display: swap; /* Sangat Penting untuk Performa! */
}
Kesimpulan
-
Google Fonts cocok untuk proyek cepat dan kemudahan pemeliharaan.
-
@font-face cocok untuk font berbayar/lisensi khusus atau optimasi performa tingkat lanjut dengan meng-host file secara lokal.
