Pemuatan Halaman Lebih Cepat
File font yang lebih kecil diunduh lebih cepat, meningkatkan metrik LCP (Largest Contentful Paint), yang sangat penting untuk kinerja situs.
Penyusun Subset Font
Kurangi ukuran file font web Anda dengan membuat subset font. Hanya simpan karakter yang Anda butuhkan, dengan dukungan untuk karakter kustom, rentang Unicode, dan pratinjau langsung. Tingkatkan kinerja situs Anda dan Core Web Vitals.
Iklan
Iklan
Sebuah penyusun subset font mengurangi ukuran file font dengan mengekstrak hanya karakter (glyph) yang benar-benar Anda butuhkan. File font lengkap dapat berisi ribuan glyph untuk berbagai bahasa, tetapi situs web biasanya hanya menggunakan beberapa ratus. Membuat subset font dari 500 KB menjadi 50 KB secara dramatis meningkatkan kecepatan pemuatan halaman. Alat ini memproses font secara lokal menggunakan HarfBuzz (hb-subset) — tidak ada file font yang diunggah.
Kecilkan file font sebesar 80-95% tanpa mengunggahnya
Simpan hanya karakter yang benar-benar digunakan situs web Anda. Mendukung TTF, OTF, WOFF, dan WOFF2 dengan rentang Unicode. Semua diproses secara lokal.
Pemuatan halaman lebih cepat
100% privat
Gratis tanpa batas
Cara menggunakan
- 1
Unggah Font
Unggah file font .TTF, .OTF, .WOFF, atau .WOFF2 Anda menggunakan area seret dan lepas.
- 2
Tentukan Karakter
Masukkan semua karakter yang benar-benar digunakan di situs Anda ke dalam kotak teks. Anda juga dapat menambahkan rentang Unicode umum, seperti U+4E00-9FFF untuk karakter Cina.
- 3
Buat Subset & Unduh
Klik 'Buat Subset'. Alat akan menghasilkan file font baru yang lebih kecil. Unduh font yang dioptimalkan dan gunakan di proyek Anda. Format output (TTF atau OTF) ditentukan secara otomatis dari format kerangka font.
Mengapa Membuat Subset Font Anda?
Pengalaman Pengguna yang Lebih Baik
Pengguna melihat konten teks Anda lebih cepat, mengurangi waktu tunggu, yang dapat menurunkan rasio pentalan dan meningkatkan kepuasan.
Core Web Vitals yang Ditingkatkan
Kecepatan halaman adalah faktor peringkat utama untuk mesin pencari seperti Google. Mengoptimalkan font adalah cara yang ampuh untuk meningkatkan skor Core Web Vitals Anda.
100% privat
File font Anda diproses secara lokal. Tidak pernah diunggah, tidak pernah disimpan, tidak pernah dikirim ke server.
Iklan
Memahami Subsetting Font
Mengapa file font begitu besar
File font modern (OTF, TTF, WOFF, WOFF2) berisi jauh lebih banyak daripada bentuk huruf. Font Latin tipikal mencakup huruf besar dan kecil, digit, tanda baca, karakter beraksen, ligatur, glyph alternatif, pasangan kerning, dan fitur OpenType (kap kecil, angka gaya lama, alternate kontekstual). Keluarga font yang komprehensif dapat mencakup 1.000+ glyph. Saat Anda menggunakan font di situs web yang hanya menampilkan teks Inggris, Anda mengirimkan 90% data font tanpa digunakan — membuang bandwidth dan memperlambat pemuatan halaman.
Subsetting font memecahkan masalah ini dengan mengekstrak hanya glyph yang Anda butuhkan. Untuk situs khusus Inggris, Anda mungkin hanya membutuhkan 95 karakter ASCII yang dapat dicetak — mengurangi font dari 500 KB menjadi 20-50 KB. Untuk situs yang menggunakan Latin dasar + karakter beraksen umum, Anda mungkin membutuhkan 200 glyph. Alat subset menggunakan HarfBuzz (hb-subset) untuk mengurai struktur biner font, mengekstrak glyph yang ditentukan beserta metrik terkaitnya (kerning, advance width), dan membangun kembali file font yang valid hanya dengan glyph tersebut.
Format WOFF2 menyediakan kompresi tambahan di atas subsetting. WOFF2 menggunakan kompresi Brotli, yang mencapai rasio kompresi 15-30% lebih baik daripada kompresi deflate yang digunakan dalam WOFF. Untuk penggunaan web, WOFF2 direkomendasikan karena memberikan ukuran file terkecil sambil mempertahankan kualitas penuh.
Iklan
Strategi subsetting praktis
Untuk sebagian besar situs web, strategi paling sederhana adalah membuat subset ke rentang Unicode Latin Dasar (U+0020 hingga U+007E), yang mencakup semua karakter ASCII. Ini cukup untuk konten berbahasa Inggris. Untuk situs multibahasa, buat subset ke rentang Unicode spesifik yang dibutuhkan setiap bahasa dan gunakan properti CSS unicode-range untuk memuat hanya subset yang relevan di setiap halaman. Google Fonts menggunakan teknik ini — menyajikan subset berbeda berdasarkan konten halaman.
Saat membuat subset, berhati-hatilah agar tidak menghapus glyph yang direferensikan oleh fitur OpenType. Misalnya, fitur kap kecil (smcp) mengganti huruf kecil dengan versi huruf besar kecil — jika Anda menghapus glyph kap kecil, fitur tersebut akan rusak. Alat kami mempertahankan definisi fitur font tetapi hanya menyertakan glyph yang Anda tentukan. Jika Anda membutuhkan fitur OpenType, sertakan semua glyph yang direferensikan fitur tersebut. Untuk teks isi di web, seringkali yang terbaik adalah menonaktifkan fitur OpenType yang kompleks dan membuat subset hanya dengan bentuk huruf dasar.
Iklan
Bagaimana ini dibandingkan dengan alat subset font lain?
Perbandingan langsung alat subset font populer.
| Fitur | NeatForge | Font Squirrel | Everything Fonts |
|---|---|---|---|
| Privasi (tanpa unggah) | 100% browser | Unggah ke server | Unggah ke server |
| Input TTF/OTF/WOFF/WOFF2 | Semua format | Terbatas | |
| Output WOFF2 | hanya TTF/OTF | ||
| Set karakter kustom | Terbatas | ||
| Mempertahankan fitur OpenType | |||
| Font emoji berwarna (COLR/CBDT) | |||
| Tanpa pendaftaran | Email diperlukan |
Font Squirrel dan subsetter berbasis server lainnya mengharuskan Anda mengunggah file font. Alat kami menggunakan HarfBuzz (hb-subset) untuk memproses semuanya secara lokal di browser Anda.
Pertanyaan yang sering diajukan
Apakah file font saya aman? Apakah diunggah?
Ya, 100% aman. Semua pemrosesan font terjadi secara lokal di browser Anda. File font Anda tidak pernah diunggah ke server kami, memastikan data Anda tetap pribadi.
Mengapa file font saya menjadi LEBIH BESAR setelah penyusunan subset?
Ini bisa terjadi pada font asli yang sangat kecil atau sangat dioptimalkan. Subsetting mempertahankan tabel font yang sudah ada dan hanya menghapus glyph yang tidak digunakan, tetapi setiap font memiliki overhead struktural tetap (header, direktori tabel, catatan nama, fitur layout). Pada font yang sangat kecil, overhead ini mendominasi sehingga subset bisa sedikit lebih besar daripada file aslinya. Jika ini terjadi, font Anda sudah sangat efisien — terus gunakan file aslinya. Hal ini paling umum pada font dengan kurang dari 100 karakter atau yang sudah di-subset. Untuk sebagian besar font (500+ glyph), subset 50-100 karakter mengurangi ukuran sebesar 80-95%. Pratinjau langsung menampilkan perkiraan ukuran file sebelum mengunduh.
Format output mana yang harus saya pilih: OTF atau TTF?
Untuk pengembangan web modern, keduanya adalah titik awal yang sangat baik. Setelah penyusunan subset, praktik terbaik adalah mengonversi font yang dihasilkan ke format `.woff2` untuk kompresi maksimum.
Bisakah saya menggunakan font subset dalam proyek komersial?
Anda harus mematuhi lisensi font asli yang Anda unggah. Menyusun subset font tidak mengubah lisensinya. Pastikan Anda memiliki hak untuk mengubah dan menggunakan font untuk tujuan Anda.
Berapa banyak saya dapat mengurangi ukuran file font?
Jumlah pengurangan tergantung pada ukuran font asli dan jumlah karakter yang Anda pertahankan. Font Latin tipikal berisi 400-700 glyph (termasuk huruf besar, huruf kecil, angka, tanda baca, karakter beraksen, dan simbol) dengan berat 80-200 KB sebagai TTF. Jika Anda membuat subset hanya untuk 50-80 karakter yang digunakan di situs web Inggris tipikal (A-Z, a-z, 0-9, tanda baca dasar), ukuran file turun menjadi 15-40 KB — pengurangan 80%. Font CJK (Cina, Jepang, Korea) bisa jauh lebih besar (5-20 MB) karena berisi ribuan karakter. Membuat subset font CJK menjadi 2.000 karakter paling umum dapat mengurangi ukuran file lebih dari 90%.
Karakter apa yang harus saya sertakan dalam subset saya?
Minimal, sertakan semua karakter yang muncul di situs web Anda: huruf besar A-Z, huruf kecil a-z, digit 0-9, dan semua tanda baca yang digunakan dalam konten Anda (titik, koma, tanda kutip, tanda hubung, dll.). Sertakan juga karakter khusus apa pun yang spesifik untuk konten Anda (simbol mata uang, operator matematika, panah). Untuk situs multibahasa, sertakan karakter beraksen untuk setiap bahasa yang Anda dukung (misalnya à, é, ü, ñ untuk Prancis, Jerman, Spanyol). Untuk situs CJK, sertakan 1.000-3.500 karakter paling umum untuk bahasa Anda. Pendekatan yang baik adalah memindai konten teks situs web Anda dan mengekstrak kumpulan karakter unik — ini memastikan Anda tidak melewatkan karakter apa pun sambil menjaga subset sekecil mungkin.
Apa itu rentang Unicode dan bagaimana cara menggunakannya?
Rentang Unicode (seperti U+0041-005A untuk huruf besar A-Z) menentukan blok karakter yang bersebelahan dalam standar Unicode. Alat ini menerima karakter individual maupun rentang Unicode di kolom input. Misalnya, 'A-Za-z0-9' menentukan semua huruf dan digit ASCII. 'U+4E00-9FFF' menentukan blok Ideograf Terpadu CJK (karakter Cina umum). 'U+3040-309F' menentukan Hiragana (Jepang). Anda dapat menggabungkan karakter dan rentang: 'Hello World U+4E00-9FFF' akan mencakup karakter dalam 'Hello World' ditambah semua karakter Cina umum. Ini berguna untuk situs web multibahasa yang membutuhkan karakter Latin dan CJK.
Apakah subsetting akan memengaruhi kualitas rendering font?
Tidak. Subsetting mempertahankan outline glyph, instruksi hinting, dan pasangan kerning yang sama persis seperti font asli. Karakter yang disertakan identik dengan yang asli. Satu-satunya perubahan adalah bahwa karakter yang tidak disertakan dihapus, mengurangi ukuran file. Tidak ada kehilangan kualitas untuk karakter yang tersisa.
Apakah font emoji berwarna (seperti Noto Color Emoji) didukung?
Ya. Font emoji berwarna didukung sepenuhnya. Alat ini melestarikan dan memangkas tabel glyph berwarna dengan benar — CBDT/CBLC (warna bitmap, digunakan oleh Noto Color Emoji) dan COLR/CPAL (warna vektor, digunakan oleh versi COLR dari Noto Color Emoji, Twemoji, Segoe UI Emoji, dll.). Contohnya, subset font Noto Color Emoji yang ~10 MB menjadi hanya beberapa emoji menghasilkan file hanya beberapa kilobyte, sementara setiap emoji yang dipilih tetap dirender dalam warna penuh. Satu batasan: tabel sbix Apple dan tabel SVG lama tidak dapat disubset ulang oleh mesin berbasis browser dan dibuang dengan peringatan yang terlihat; data warna COLR/CBDT tidak terpengaruh.
Privasi Anda Adalah Prioritas Kami
Alat ini berjalan sepenuhnya di browser Anda. File Anda tidak diunggah, disimpan, atau dianalisis.
- Kami tidak mengunggah, menyimpan, atau menganalisis file Anda.
- Semua yang Anda proses tetap di perangkat Anda.
- Alat ini membaca file font Anda dari memori lokal, mengurai tabel font (glyph, kerning, metrik, hinting), membuat font baru yang hanya berisi karakter yang ditentukan, dan menghasilkan file output — semuanya tanpa permintaan jaringan apa pun.
- Tidak ada log sisi server yang mencatat nama file font atau pilihan karakter Anda, tidak ada analitik yang melacak pola penggunaan Anda, dan tidak ada penyimpanan persisten dalam bentuk apa pun.
- Saat Anda menutup tab browser, semua data font dan konfigurasi subset segera dihapus dari memori.
- Hal ini membuat alat ini aman untuk font berpemilik, font komersial berlisensi, tipografi khusus merek, dan skenario apa pun di mana file font tidak boleh terekspos ke server pihak ketiga.
- Alat ini juga berfungsi offline setelah pemuatan halaman awal.
Bahkan jika koneksi internet Anda terputus, file Anda tetap aman.
Anda mungkin juga suka
Jelajahi topik ini
Panduan terkait
Mengapa Font Subsetting adalah Senjata Rahasia Anda untuk Mempercepat Waktu Muat Halaman
Pelajari apa itu font subsetting, mengapa sangat penting untuk Core Web Vitals dan SEO, dan cara menggunakan alat online gratis kami untuk mengurangi ukuran file font secara drastis demi performa website yang lebih baik.
Cara encode dan decode teks Base64 dengan aman
Pelajari apa itu Base64, kapan memakai Base64 standar atau URL-safe, dan cara encode/decode teks secara lokal di browser.
10 Alat Produktivitas Pengembang Gratis yang Benar-Benar Menghemat Waktu
Temukan alat pengembang gratis terbaik yang meningkatkan produktivitas tanpa menghabiskan banyak uang. Dari pemformat kode hingga penguji API, alat-alat ini akan menyederhanakan alur kerja Anda.
Iklan