devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Audit Situs

Webfont Generator — TTF & OTF ke WOFF2 dengan CSS

Ubah font desktop menjadi webfont yang cepat: konversi ke WOFF2 dan WOFF, simpan hanya karakter yang kamu butuhkan, dan unduh semuanya beserta CSS @font-face siap pakai. Font kamu tidak pernah diunggah.

Diperbarui
Cek lisensi font kamu dulu. Font dilindungi lisensi, dan banyak yang tidak mengizinkan penggunaan web atau konversi, meski sudah kamu beli. devpack tidak memverifikasi lisensi dan tidak bertanggung jawab atas cara kamu menggunakan font.
Letakkan file font di sini atau klik untuk memilih
TTF, OTF, WOFF atau WOFF2 · Tambahkan satu keluarga font utuh · Diproses di browser kamu, tidak ada yang diunggah
Tambahkan file kamu di atas. Hasil, pratinjau, dan unduhan akan muncul di sini.

Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.

Apakah alat ini membantu?0.0 0 penilaian
Perkecil ukuran font dengan hanya menyimpan karakter yang kamu butuhkanLatin, Cyrillic, Yunani, atau daftar kustom.Font Subsetter →

Cara menggunakan Webfont Generator

  1. Letakkan satu atau beberapa file TTF atau OTF di kotak ini. Tambahkan semua bobot dari satu keluarga font sekaligus.
  2. Periksa catatan lisensi di setiap font. Pilih format output dan, jika perlu, karakter yang ingin dipertahankan.
  3. Pastikan kamu berhak mengonversi font tersebut, lalu klik Buat webfont.
  4. Bandingkan ukurannya, uji pratinjaunya, lalu klik Unduh ZIP. Unggah folder fonts dan tambahkan CSS-nya ke situsmu.

Cek lisensi font kamu dulu

Font adalah perangkat lunak, dan lisensinya menentukan apa yang boleh kamu lakukan dengannya. Banyak lisensi komersial hanya mencakup penggunaan desktop, atau meminta biaya terpisah untuk penggunaan web, dan sebagian melarang konversi file sama sekali. Ini bisa berlaku meski kamu sudah membeli font-nya. Lisensi terbuka seperti SIL Open Font License biasanya mengizinkan penggunaan web, tetapi tetap punya ketentuannya sendiri. Baca lisensimu sebelum mengonversi. devpack tidak memverifikasi lisensi, dan kamu sepenuhnya bertanggung jawab atas cara menggunakan font dan file yang kamu buat.

Format font mana yang sebaiknya dipakai?

WOFF2 adalah pilihan tepat untuk hampir semua situs web. Kompresinya paling baik dan didukung di semua browser modern. Tambahkan WOFF hanya jika kamu perlu mendukung browser yang jauh lebih lama. TTF dan OTF adalah format desktop dan biasanya jauh lebih besar.

Apa itu font subsetting?

Sebuah font bisa berisi ribuan karakter yang tidak pernah ditampilkan situsmu. Subsetting membuangnya, yang bisa memangkas ukuran file secara drastis dan mempercepat halamanmu. Saat kamu memilih set karakter, CSS juga mendapat unicode-range, sehingga browser hanya mengunduh font ketika halaman memerlukannya. Pertahankan semua bahasa yang dipakai situsmu, karena karakter yang dihapus akan jatuh ke font lain.

Apa saja isi ZIP-nya?

  • Folder fonts berisi file hasil konversi.
  • stylesheet.css dengan satu aturan @font-face untuk setiap font, termasuk bobot dan gaya.
  • demo.html, halaman yang menampilkan setiap font dalam penggunaannya.
  • FONT-INFO.txt, berisi detail hak cipta dan lisensi yang dilaporkan setiap font.

Opsi lanjutan

  • Font variabel: persempit sumbu, hapus, atau buat bobot statis seperti 400 dan 700. CSS akan mendapat rentang bobot yang tepat.
  • Fitur OpenType: pertahankan set standar, simpan semuanya, atau centang yang kamu inginkan saja.
  • Metrik vertikal: samakan tinggi baris di berbagai platform, atau atur nilaimu sendiri.
  • Fallback yang sepadan: menambahkan font sistem yang diskalakan agar teks bergeser lebih sedikit saat webfont dimuat, yang membantu skor layout shift halamanmu.
  • Kode: dapatkan aturan @font-face, contoh penggunaan, tag preload, atau pengaturan Tailwind CSS.

Nilai font-display mana yang terbaik?

swap langsung menampilkan teks dengan font cadangan, lalu menggantinya dengan font kamu saat sudah dimuat. optional menghindari pergantian dan pergeseran tata letak itu, tetapi koneksi lambat mungkin tidak pernah menampilkan font kamu. Untuk mempercepat lagi, preload font utamamu dengan tag link rel="preload" dan uji halamannya dengan Page Speed Test.

Menggunakan webfont di Webflow

Unduh file WOFF2 dan unggah di Site settings → Fonts → Custom fonts. Webflow akan membuat CSS-nya untukmu. Perlu kode kustom di proyekmu? Alat HTML & CSS to Webflow bisa membantu.

Juga dicari sebagai: generator web font, alternatif font squirrel, generator font-face, ttf ke woff2, otf ke woff2, subsetting font, konversi font ke webfont, generator css font-face.

Tool yang cocok dipakai bersama Webfont Generator

  • Font Subsetter — Buat font jadi jauh lebih kecil dengan menghapus karakter yang tidak kamu pakai.
  • Kompres Gambar — Perkecil foto dan grafis hingga 90% tanpa penurunan kualitas yang terlihat, tergantung gambar dan pengaturannya.
  • CSS Minifier — Tempel stylesheet untuk langsung memperkecil ukurannya.
  • Gaya Tombol CSS — Pilih dari 24 tombol CSS animasi: isian, border, glow, kilau, dan efek tekan 3D.

Pertanyaan yang sering diajukan

Bolehkah saya mengonversi font apa pun?
Tidak selalu. Itu bergantung pada lisensi font, dan banyak font komersial tidak mengizinkannya. Kamu harus memiliki font tersebut atau lisensi yang mengizinkan konversi dan penggunaan web. devpack tidak memeriksa hal ini untukmu, dan kamu sepenuhnya bertanggung jawab atas penggunaanmu.
Apa yang terjadi jika font ditandai dibatasi?
Pengaturan font itu sendiri menyatakan bahwa pemiliknya tidak mengizinkan penyematan. Kamu hanya bisa melanjutkan dengan mengonfirmasi bahwa kamu sudah mendapat izin dari pemilik font.
Apakah devpack memeriksa apakah font saya berlisensi?
Tidak. Alat ini hanya menampilkan informasi yang dilaporkan file font tentang dirinya sendiri, dan informasi itu bisa saja hilang atau salah. Selalu periksa lisensi aslimu.
Apakah font saya diunggah?
Tidak. Semuanya berjalan di browser kamu, jadi file font tetap berada di perangkatmu.
Apakah ini alternatif Font Squirrel?
Fungsinya serupa, dengan satu perbedaan besar: font kamu dikonversi di browser dan tidak dikirim ke server. Alat ini juga menangani font variabel, fallback yang sepadan, dan Tailwind CSS.
Perlukah saya tetap memakai WOFF?
Jarang. WOFF2 didukung di semua browser modern, jadi sebagian besar situs hanya perlu format itu.
Mengapa ada karakter yang hilang setelah konversi?
Karakter itu dihapus oleh pilihan karaktermu, atau font memang tidak memilikinya. Pilih Simpan semua, atau tambahkan karakter yang hilang lalu buat ulang.
Mengapa tidak ada output EOT atau SVG?
Format itu hanya dibutuhkan browser yang sangat lama. Browser modern menggunakan WOFF2.
Bisakah saya memasang Webfont Generator sebagai aplikasi web dan memakainya offline?
Bisa. Webfont Generator adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.

Tool terkait

localFont SubsetterBuat font jadi jauh lebih kecil dengan menghapus karakter yang tidak kamu pakai. Pilih kumpulan bahasa…localKompres GambarPerkecil foto dan grafis hingga 90% tanpa penurunan kualitas yang terlihat, tergantung gambar dan…localCSS MinifierTempel stylesheet untuk langsung memperkecil ukurannya. Kamu akan melihat ukuran asli dan hasil minify,…localHTML & CSS ke WebflowTempel HTML dan CSS-nya, klik Copy to Webflow, lalu tempel di Designer. Kamu langsung mendapatkan Div…localGaya Tombol CSSPilih dari 24 tombol CSS animasi: isian, border, glow, kilau, dan efek tekan 3D. Atur warna, ukuran, serta…apiUji Kecepatan HalamanJalankan Google Lighthouse pada URL apa pun untuk tampilan mobile atau desktop. Lihat skor performa,…