Cara Memakai Font Kustom di Website (Tes Dulu)

Untuk memakai font kustom di websitemu, kamu mengunggah file font ke situsmu, memberi tahu CSS lokasinya dengan aturan @font-face, lalu memakainya dengan font-family. Sebelum itu semua, kamu bisa menguji font di halaman aslimu: dengan ekstensi gratis FontMee kamu memuat file .woff2, .ttf atau .otf dari komputermu dan melihatnya di website mana pun dengan satu klik, tanpa mengubah apa pun dan tanpa mengunggah apa pun.

Apa itu font kustom

Font kustom adalah file font yang bukan salah satu font bawaan setiap komputer dan bukan salah satu font gratis di Google Fonts. Bisa berupa font merek dari desainer, font yang kamu beli, atau font buatanmu sendiri. Biasanya berupa file berakhiran .woff2, .woff, .ttf atau .otf. Belum punya file? Panduan kami tentang memasang Google Fonts membahas yang gratis.

Untuk website, .woff2 adalah pilihan terbaik: ukurannya kecil sehingga halaman lebih cepat dimuat, dan semua browser masa kini bisa membacanya. .ttf dan .otf adalah format yang dipakai di komputer. Keduanya juga jalan di browser, tetapi file-nya lebih besar. Kalau kamu hanya punya .ttf atau .otf, untuk tes itu sudah cukup.

Langkah 1: Tes dulu di website asli

Mengunggah font dan menulis kode hanya untuk mendapati kamu tidak suka akan menghabiskan satu sore. FontMee adalah ekstensi Chrome gratis, tambahan kecil yang memberi Chrome satu fitur baru, dan memungkinkan kamu mencoba font dulu di halaman langsung. Ia juga menerima file milikmu sendiri. Video singkat memperlihatkan panelnya.

1. Pasang FontMee. Tambahkan dari Chrome Web Store. Gratis dan tidak perlu akun. Klik ikon puzzle di Chrome lalu sematkan, supaya selalu hanya satu klik.
2. Buka satu halaman websitemu dan klik ikon FontMee. Panel terbuka di samping halaman. Kamu juga bisa menekan Alt + Shift + F. Halaman milik Chrome sendiri (Tab Baru, Web Store, halaman chrome://) tidak bisa diubah.
3. Tekan Unggah dan pilih file fontmu. Kamu bisa memilih beberapa file sekaligus, masing-masing sampai 6 MB. FontMee menamai font sesuai nama file, jadi my_brand_sans.woff2 menjadi my brand sans.
4. Temukan di Fontku. Font yang kamu unggah punya filter sendiri dan ditandai Milikmu. Arahkan kursor ke salah satunya untuk mengganti nama dengan ikon pensil atau menghapusnya dengan ikon tempat sampah.
5. Klik font untuk mencobanya. Di bawah Terapkan perubahan ke pilih Semua, Judul atau Isi. Pakai Atur untuk ukuran, ketebalan, dan tinggi baris, lalu beralih antara Font asli dan Pratinjau FontMee untuk membandingkan.
6. Ketik kata-katamu sendiri. Di kotak teks contoh, ketik judul sungguhan, sebuah nama, atau kalimat dengan huruf khususmu, untuk melihat bagaimana font menanganinya.

File fontmu tetap berada di browsermu, di komputermu. Tidak ada yang diunggah, dan tes hanya mengubah apa yang kamu lihat, jadi tidak ada orang lain yang tahu. Ingin menunjukkan hasilnya ke klien? FontMee bisa membuat gambar sebelum dan sesudah: begini caranya.

Langkah 2: Taruh file font di websitemu

Kalau sudah puas, font harus berada di situsmu, karena browser pengunjung hanya bisa memuat file yang ada di internet, bukan di komputermu. Buat folder bernama fonts dan unggah file ke dalamnya, seperti kamu mengunggah gambar: lewat pengelola file hosting, lewat FTP, atau lewat fitur unggah font yang mungkin ditawarkan pembuat websitemu. Foldernya bisa tampak seperti ini:

your-website/
  index.html
  style.css
  fonts/
    my-brand-sans.woff2
    my-brand-sans.ttf

Pakai nama file sederhana, huruf kecil, tanpa spasi (my-brand-sans.woff2, bukan My Brand Sans (1).woff2). Ini menghindari salah satu penyebab klasik “fontku tidak muncul”.

Langkah 3: Beri tahu CSS tentang font itu

Sekarang kamu menulis dua hal kecil di CSS, aturan yang memberi tahu halaman bagaimana tampil. Pertama blok @font-face, yang berkata “ada font dengan nama ini, dan file-nya di sini”. Lalu aturan biasa yang memakai font tersebut.

@font-face {
  font-family: 'My Brand Sans';
  src: url('/fonts/my-brand-sans.woff2') format('woff2'),
       url('/fonts/my-brand-sans.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: 'My Brand Sans', sans-serif;
}

h1, h2 {
  font-family: 'My Brand Sans', serif;
}

Dengan bahasa sederhana: font-family di blok pertama adalah nama yang kamu karang sendiri. src adalah lokasi file, dan baris kedua adalah cadangan .ttf untuk browser lama. font-display: swap menampilkan teksmu dengan font cadangan sampai font aslinya tiba, sehingga pengunjung tidak pernah menatap ruang kosong. Di aturan bagian bawah, kata setelah koma (sans-serif) adalah font cadangan itu, dan sebaiknya selalu menambahkannya.

Taruh CSS ini di tempat situsmu menyimpan gaya: di style.css, di WordPress lewat Tampilan, Sesuaikan, CSS Tambahan, atau di kotak CSS kustom pembuat websitemu. Kalau file-mu ada di folder lain, ubah jalur di dalam url().

Jalan pintas: biar FontMee yang menulis

Kembali di FontMee, tekan Salin CSS. Untuk font yang kamu unggah, FontMee menulis aturanmu dan menambahkan komentar berisi baris @font-face sebagai titik awal. Ubah nama dan ekstensi file kalau milikmu berbeda, misalnya menjadi .ttf. Ingin semuanya siap pakai? Tekan Unduh ZIP self-hosting. Kamu mendapat folder berisi file fontmu di dalam fonts, fonts.css dengan blok @font-face, fontmee.css dengan aturanmu, dan README singkat. Unggah foldernya, hubungkan kedua stylesheet, selesai.

Empat hal yang perlu dicek sebelum dipublikasikan

• Cek lisensinya. File font di komputermu tidak otomatis bebas dipasang di website. Banyak lisensi hanya mencakup pemakaian desktop dan punya lisensi web terpisah. FontMee mengingatkanmu dengan “file milikmu sendiri: cek lisensinya sebelum dipublikasikan”. Kalau ragu, tanyakan dari mana kamu mendapat font itu.
• Cek hurufmu. Di kotak contoh, ketik kata dengan karakter khususmu (é, ñ, ü, €, ©). Sebuah font bisa tampak sempurna tetapi tetap kehilangan beberapa huruf, dan huruf itu lalu muncul dalam font cadangan.
• Sediakan font cadangan. Akhiri setiap font-family dengan serif atau sans-serif, supaya teks tetap tampak baik selagi font dimuat.
• Jaga tetap ringan. Satu atau dua file font sudah lebih dari cukup. Setiap file tambahan membuat halaman sedikit lebih berat, jadi pilih .woff2 kalau bisa.

Belum punya website? Kalau begitu fontnya nomor dua. Sebuah website juga butuh rumah untuk tinggal, dan pembuat website adalah cara tercepat mendapatkannya tanpa kode.

Dapatkan ekstensinya

FontMee gratis, dengan 1.900+ font, Salin CSS dalam empat format, ZIP self-hosting, dan unggah font milikmu sendiri. Tanpa akun, tanpa langganan. Tambahkan dari Chrome Web Store, atau baca dulu halaman FontMee.

Perlu diketahui sebelum mulai

Pertanyaan Umum