Cara Menambahkan Font Kustom ke Website

1. Siapkan file font

Pastikan lisensimu mengizinkan penggunaan di web. Lalu masukkan file TTF atau OTF kamu ke Webfont Generator dan unduh ZIP-nya. Biasanya kamu hanya perlu file WOFF2.

2. Unggah file

Salin folder fonts ke website kamu, misalnya ke /fonts/. Font harus dimuat dari domain kamu sendiri, atau dari server yang mengirim header Access-Control-Allow-Origin yang benar.

3. Tambahkan aturan @font-face

Setiap bobot dan gaya mendapat satu aturan:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brand-sans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Gunakan nama keluarga font yang sama untuk setiap bobot. Browser kemudian akan memilih file yang tepat untuk teks normal dan tebal dengan sendirinya.

4. Gunakan font-nya

body {
  font-family: "Brand Sans", Arial, sans-serif;
}

Selalu cantumkan font cadangan, karena font ini akan tampil saat font kamu sedang dimuat atau jika gagal dimuat.

Menambahkan font di platform populer

• Webflow: buka Site settings → Fonts → Custom fonts lalu unggah file WOFF2 kamu.
• WordPress: block theme bisa mengelola font lewat font library di Site Editor. Di theme lain, tambahkan file ke child theme dan letakkan CSS di stylesheet-nya.
• Tailwind CSS: tambahkan aturan ke CSS kamu, lalu atur font sebagai nilai theme. Tab Tailwind di Webfont Generator memberi kamu kodenya.

Pastikan semuanya berfungsi

Buka website kamu, lalu buka developer tools browser. Di panel Network, filter berdasarkan Font lalu muat ulang halaman. Setiap file seharusnya menampilkan status 200. Status 404 biasanya berarti path di CSS kamu salah. Permintaan yang diblokir biasanya mengarah ke header cross-origin. Setelah itu, jalankan Page Speed Test untuk melihat dampak font terhadap kecepatan.