Kompres Font untuk Mengurangi Ukuran File

Mengapa saya perlu mengompres file font?

Kompresi font menyelesaikan masalah kinerja web dan penyimpanan. Situs web Anda menggunakan font kustom dengan total 2MB, memperlambat pemuatan halaman. Perpustakaan font Anda memiliki 500 font yang memakan 5GB penyimpanan. Aplikasi seluler Anda melebihi batas ukuran karena font yang disematkan. Mungkin Anda mendistribusikan paket font yang terlalu besar untuk email, atau Anda perlu mengoptimalkan font web untuk skor Core Web Vitals yang lebih baik dan rendering yang lebih cepat.

Berbagai skenario memerlukan tingkat kompresi yang berbeda. Font web mendapatkan manfaat dari kompresi agresif (subsetting ke karakter yang digunakan, menghapus hinting) karena setiap KB mempengaruhi waktu muat halaman. Perpustakaan font desktop dapat menggunakan kompresi sedang untuk menghemat penyimpanan sambil mempertahankan semua glyph. Font ikon sangat cocok untuk subsetting berat karena Anda hanya memerlukan glyph tertentu. Mengompresi font memungkinkan Anda meningkatkan kinerja situs web, mengurangi biaya bandwidth hosting, memenuhi batas unggah platform, dan menghemat penyimpanan dalam koleksi font besar.

Bagaimana cara kerja kompresi font?

Kompresor kami menggunakan proses yang sederhana dan aman:

Unggah Font Anda

Seret dan lepas file font Anda atau klik untuk menjelajah. File Anda dienkripsi selama unggah menggunakan SSL. Tanpa batas ukuran file — termasuk font CJK besar.

Pilih Pengaturan Kompresi

Pilih preset kualitas (Cepat, Normal, Maksimum, Ultra) atau sesuaikan subsetting, hinting, dan pengaturan optimasi tabel. Antarmuka kami menunjukkan perkiraan pengurangan ukuran file.

Pemrosesan Server

Font Anda dikompresi di server kami menggunakan alat profesional. Kompresi cepat dan efisien yang mempertahankan kualitas glyph sambil mengurangi ukuran file.

Unduh & Bersihkan

Unduh font terkompresi Anda. Kami secara otomatis menghapus semua file dari server kami dalam waktu 1 jam demi privasi Anda. Tidak ada file yang disimpan secara permanen.

Seluruh proses biasanya memakan waktu beberapa detik. Font asli Anda tidak pernah dimodifikasi.

Pengaturan kompresi apa yang harus saya gunakan?

Pilih pengaturan kompresi berdasarkan kebutuhan Anda:

Cepat (Kualitas Rendah)

Terbaik untuk kompresi cepat ketika ukuran file sangat penting. Mengaktifkan subsetting Unicode dan menghapus hinting. Ideal untuk font web dengan penggunaan karakter terbatas, distribusi terbatas bandwidth, atau ketika ruang penyimpanan sangat ketat.

Normal (Kualitas Sedang)

Kompresi seimbang dengan kualitas yang baik. Menonaktifkan subsetting dan mempertahankan hinting, tetapi mengoptimalkan tabel font. Terbaik untuk penggunaan umum, optimasi perpustakaan, dan distribusi font web standar. Sebagian besar pengguna harus memulai di sini.

Maksimum (Kualitas Tinggi)

Kualitas tinggi dengan kompresi sedang. Mempertahankan semua glyph dan hinting, hanya mengoptimalkan tabel. Ideal untuk font desktop, tipografi profesional, atau font di mana kualitas glyph dan hinting sangat penting.

Ultra (Kualitas Maksimum)

Tidak ada kehilangan kualitas, kompresi minimal. Mempertahankan semuanya termasuk tabel yang tidak teroptimasi. Sempurna ketika Anda membutuhkan kualitas mendekati asli tetapi ukuran file sedikit lebih kecil. Terbaik untuk arsip, salinan master, atau pekerjaan desain profesional.

Pengaturan Kustom

Gunakan Opsi Lanjutan untuk menyempurnakan kompresi. Kontrol subsetting Unicode (hapus karakter yang tidak digunakan), aktifkan penghapusan hinting (mempengaruhi rendering layar), sesuaikan optimasi tabel (mempengaruhi struktur file). Sempurna untuk kebutuhan spesifik seperti batas unggah platform atau kebutuhan set karakter.

Masih ragu?

Mulailah dengan Normal untuk sebagian besar font web. Gunakan Cepat untuk font web dengan karakter terbatas (hanya Latin). Gunakan Maksimum untuk font desktop di mana kualitas sangat penting. Gunakan Ultra untuk pekerjaan desain profesional atau ketika kualitas mendekati asli diperlukan.

Panduan cepat berdasarkan kasus penggunaan

Font web (hanya bahasa Inggris): Cepat dengan subsetting. Font web (multibahasa): Normal. Font desktop: Maksimum. Desain/arsip: Ultra. Font ikon: Cepat dengan subsetting berat.

Ingat: Anda selalu dapat mengompresi ulang dengan pengaturan yang berbeda jika hasil pertama tidak ideal. Uji font terkompresi di lingkungan target Anda untuk memastikan kualitas memenuhi kebutuhan Anda.

Apa itu subsetting font?

Kualitas konversi font tergantung pada format sumber dan target: Konversi tanpa kehilangan - TTF ↔ OTF (keduanya menggunakan struktur yang mirip), WOFF ↔ TTF/OTF (WOFF adalah TTF/OTF yang terkompresi), PFB ↔ PFA (data yang sama, pengkodean berbeda). Hampir tanpa kehilangan - TTF/OTF → WOFF2 (kompresi yang sangat baik, perubahan data minimal). Beberapa kehilangan data - font SVG (dukungan fitur terbatas), konversi format warisan (format lama memiliki lebih sedikit fitur).

Apa yang dipertahankan: Semua garis besar glyph (bentuk sebenarnya), pemetaan karakter Unicode, metrik font dasar (lebar, tinggi, kenaikan, penurunan), pasangan kerning (spasi huruf), informasi keluarga dan gaya. Apa yang mungkin berubah: Fitur OpenType lanjutan (dalam format yang lebih sederhana), informasi hinting (optimasi untuk rendering layar), Metadata (beberapa format mendukung metadata lebih sedikit).

Rekomendasi konversi: Untuk mempertahankan kualitas maksimum, konversi antara format modern (TTF, OTF, WOFF, WOFF2). Saat mengonversi ke font web, kehilangan kualitas minimal - font akan dirender identik di browser. Saat mengonversi dari format warisan, beberapa fitur lanjutan mungkin tidak dapat dipindahkan. Selalu uji font yang dikonversi sebelum digunakan dalam proyek produksi.

Bagaimana cara menggunakan font yang dikonversi di situs web saya?

Untuk menggunakan font yang dikonversi di situs web, Anda perlu: (1) Mengonversi font Anda ke format web (WOFF2 dan WOFF untuk kompatibilitas), (2) Mengunggah font ke server Anda, (3) Menambahkan aturan CSS @font-face, (4) Menerapkan font ke elemen. Contoh CSS: @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); font-weight: normal; font-style: normal; }

Praktik terbaik untuk font web: Gunakan WOFF2 sebagai format utama (kompresi lebih baik, pemuatan lebih cepat), Sertakan fallback WOFF untuk browser lama, Subset font untuk menyertakan hanya karakter yang diperlukan (mengurangi ukuran file), Gunakan font-display: swap untuk kinerja yang lebih baik, Preload font kritis (), Hosting font di domain yang sama atau gunakan CDN, Kompres file font selama pengiriman server.

Tips kinerja: Font web modern kecil (20-50KB untuk font Barat). WOFF2 memberikan kompresi 30% lebih baik dibandingkan WOFF. Subset font dapat mengurangi ukuran lebih dari 80% untuk situs satu bahasa. Gunakan fallback font sistem saat font kustom dimuat. Pertimbangkan font variabel untuk beberapa bobot/gaya. Uji pemuatan font pada koneksi lambat. Pantau dampak Core Web Vitals.

Bisakah saya mengonversi Google Fonts atau font komersial lainnya?

Pertimbangan hukum untuk konversi font: Font Sumber Terbuka - Font dari Google Fonts, Adobe Fonts (beberapa), Font Squirrel (font gratis) dapat dikonversi secara bebas jika lisensi mengizinkan. Periksa lisensi font individual. Font Komersial - Font yang Anda beli dengan hak konversi dapat dikonversi untuk penggunaan Anda. Periksa perjanjian lisensi Anda. Redistribusi mungkin dilarang. Font Gratis - font 'Gratis untuk penggunaan pribadi' mungkin tidak mengizinkan konversi atau penggunaan komersial. Selalu baca lisensi.

Google Fonts secara khusus: Google Fonts adalah sumber terbuka (SIL Open Font License atau Apache License). Anda DAPAT mengonversi Google Fonts untuk penggunaan pribadi Anda. Anda DAPAT menggunakan Google Fonts yang dikonversi di situs web. Anda DAPAT memodifikasi dan mengonversinya. Anda TIDAK DAPAT menjual Google Fonts yang dikonversi. Unduh dari fonts.google.com terlebih dahulu, lalu konversi. Berikan atribusi yang tepat sesuai yang diharuskan oleh lisensi.

Praktik aman: Hanya konversi font yang Anda memiliki hak untuk digunakan dan dikonversi. Simpan lisensi dengan font yang dikonversi. Jangan redistribusi font komersial yang dikonversi. Untuk proyek klien, pastikan mereka memiliki lisensi yang tepat. Ketika ragu, gunakan font sumber terbuka (Google Fonts, font gratis Font Squirrel). Pertimbangkan untuk membeli lisensi font web untuk proyek komersial. Hormati hak dan ketentuan lisensi pencipta font.

Apa perbedaan antara font TTF dan OTF?

TTF (TrueType Font) vs OTF (OpenType Font): TTF dikembangkan oleh Apple dan Microsoft pada tahun 1980-an. Menggunakan kurva Bézier kuadratik untuk outline glyph. Bekerja di semua platform. Baik untuk font sederhana dan tampilan layar. Didukung secara luas di semua perangkat lunak. Ukuran file biasanya lebih besar daripada OTF. Lebih baik dalam hinting untuk rendering layar pada ukuran kecil.

OTF adalah ekstensi dari TTF yang dikembangkan oleh Adobe dan Microsoft. Menggunakan kurva Bézier kubik (kurva PostScript). Mendukung lebih banyak fitur tipografi lanjutan (ligatur, alternatif, substitusi kontekstual). Lebih baik untuk skrip kompleks dan tipografi profesional. Mendukung lebih banyak glyph (65.000+ vs batas 65.000). Lebih baik untuk cetakan dan pekerjaan desain profesional. Standar modern untuk font profesional.

Kapan menggunakan masing-masing: Gunakan TTF untuk - Font web sederhana, Kompatibilitas maksimum, Dukungan sistem lama, Font yang dioptimalkan untuk tampilan layar. Gunakan OTF untuk - Pekerjaan desain profesional, Font dengan fitur lanjutan, Produksi cetak, Skrip kompleks (Arab, Devanagari), Proyek yang berat pada tipografi. Sistem modern mendukung keduanya dengan baik. Untuk penggunaan web, format kurang penting (keduanya dikonversi ke WOFF/WOFF2). Pilih berdasarkan fitur font yang dibutuhkan.

Bagaimana saya memastikan font yang dikonversi berfungsi di semua browser?

Dukungan format font browser: WOFF2 - Didukung oleh Chrome 36+, Firefox 39+, Safari 12+, Edge 14+ (dukungan global 95%). WOFF - Didukung oleh IE 9+, semua browser modern (dukungan global 99%). TTF/OTF - Didukung oleh semua browser tetapi file lebih besar. EOT - Hanya IE 6-11 (hanya untuk warisan). SVG - Tidak lagi digunakan, hindari untuk proyek baru. Strategi: Sediakan WOFF2 + WOFF untuk cakupan lengkap.

Contoh CSS lintas-browser: @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'), /* Browser modern */ url('myfont.woff') format('woff'); /* Cadangan */ font-weight: normal; font-style: normal; font-display: swap; /* Pengalaman pemuatan yang lebih baik */ } Ini mencakup 99,9% browser. Lewati EOT kecuali mendukung IE 8.

Rekomendasi pengujian: Uji di Chrome, Firefox, Safari, Edge (mencakup 95%+ pengguna). Periksa rendering font di Windows dan Mac (mesin rendering yang berbeda). Uji di perangkat seluler (iOS Safari, Chrome Android). Gunakan alat seperti BrowserStack untuk pengujian komprehensif. Verifikasi font cadangan dimuat dengan benar. Periksa perilaku font-display. Pantau kinerja pemuatan. Pastikan tidak ada FOUT (Flash of Unstyled Text) atau FOIT (Flash of Invisible Text).

Bisakah saya mengonversi font variabel?

Font variabel adalah font OpenType dengan sumbu variabel (berat, lebar, kemiringan, ukuran optik). Mereka mengandung beberapa gaya dalam satu file. Mengonversi font variabel: Dari TTF/OTF variabel ke WOFF2 variabel - Didukung sepenuhnya, mempertahankan semua sumbu. Antara format variabel - Ya, semua fitur variabel dipertahankan. Ke font statis - Mungkin tetapi kehilangan fungsionalitas variabel (membuat bobot/gaya tunggal). Dari statis ke variabel - Tidak mungkin (memerlukan sumber desain asli).

Manfaat font variabel: Satu file berisi beberapa bobot/gaya (ukuran file total yang jauh lebih kecil), Interpolasi halus antara bobot, Nilai bobot kustom (tidak terbatas pada bobot yang telah ditentukan), Kinerja web yang lebih baik (satu permintaan vs beberapa), Kemungkinan tipografi responsif, Penggunaan bandwidth yang lebih kecil. Contoh: Font variabel Roboto (84KB) vs Roboto reguler + bold + italic + bold italic (150KB+).

Menggunakan font variabel: Konversi ke WOFF2 untuk kompresi dan dukungan browser terbaik. Gunakan CSS: font-variation-settings: 'wght' 450; untuk berat kustom. Uji dukungan browser (didukung oleh semua browser modern sejak 2018). Sediakan cadangan non-variabel untuk browser yang lebih lama. Pertimbangkan font variabel untuk: Keluarga font besar, Desain responsif, Situs yang kritis terhadap kinerja, Proyek web modern. Google Fonts menawarkan banyak font variabel secara gratis.

Apa praktik terbaik font web?

Format dan optimasi: Gunakan WOFF2 sebagai format utama (30-50% lebih kecil dari WOFF). Sertakan fallback WOFF untuk browser lama. Subset font untuk menghapus glyph yang tidak digunakan (mengurangi ukuran hingga 50-80% untuk teks Barat). Hapus set karakter bahasa yang tidak digunakan. Gunakan font-display: swap untuk kinerja yang lebih baik. Preload font kritis: .

Strategi pemuatan: Muat font secara asinkron untuk menghindari pemblokiran render halaman. Gunakan tumpukan font sistem untuk render awal. Terapkan font-display: swap atau opsional. Batasi jumlah keluarga font (maksimal 1-2). Batasi jumlah bobot (hanya bobot yang diperlukan). Hosting font sendiri untuk kontrol dan kinerja yang lebih baik. Pertimbangkan font variabel untuk mengurangi jumlah file. Cache font secara agresif (1 tahun+).

Metrik kinerja: Targetkan <100KB total berat font. Font kritis harus dimuat dalam <1 detik. Pantau Cumulative Layout Shift (CLS) dari penggantian font. Gunakan font fallback yang sesuai dengan metrik ukuran. Uji pada koneksi 3G. Optimalkan urutan pemuatan font (font kritis terlebih dahulu). Pertimbangkan menggunakan font sistem untuk teks tubuh, font kustom untuk judul. Ukur dampak pada Core Web Vitals. Strategi font yang baik meningkatkan kinerja dan pengalaman pengguna.

Bagaimana cara mengonversi beberapa font secara batch?

Konverter font kami mendukung konversi batch: Unggah beberapa file font sekaligus, Pilih format output (berlaku untuk semua file), Klik konversi, Unduh sebagai arsip ZIP yang berisi semua font yang dikonversi. Ini menghemat waktu saat: Mengonversi seluruh keluarga font, Mempersiapkan beberapa font untuk penggunaan web, Memproses font klien secara batch, Mengonversi koleksi font lama, Menyiapkan proyek desain baru.

Manfaat konversi batch: Proses seluruh keluarga font dalam satu operasi, Format output yang konsisten di semua font, Lebih cepat daripada konversi individu, Pengemasan ZIP otomatis untuk unduhan yang mudah, Mempertahankan nama file asli, Sempurna untuk alur kerja profesional. Contoh: Unggah keluarga font (Reguler, Bold, Italic, Bold Italic), konversi semua ke WOFF2 sekaligus, unduh ZIP tunggal dengan semua file yang dikonversi.

Tips alur kerja batch: Atur font sebelum unggah (nama file dengan jelas), Simpan font terkait bersama (anggota keluarga), Konversi ke format target yang sama untuk konsistensi, Gunakan konversi batch untuk persiapan font web, Unduh ZIP dan ekstrak ke folder proyek, Uji semua font yang dikonversi bersama, Simpan asli sebagai cadangan. Untuk batch yang sangat besar (50+ font), pertimbangkan untuk mengonversi dalam kelompok untuk memastikan stabilitas.

Apa yang terjadi pada lisensi font setelah konversi?

Lisensi font dan konversi: Lisensi asli SELALU berlaku untuk font yang dikonversi. Mengonversi format TIDAK mengubah syarat lisensi. Jika lisensi font melarang konversi, jangan konversi. Jika lisensi melarang penggunaan web, jangan gunakan di situs web (bahkan dalam format web). Jika lisensi hanya untuk penggunaan pribadi, font yang dikonversi tetap hanya untuk penggunaan pribadi. Selalu patuhi syarat lisensi font asli.

Jenis lisensi umum: SIL Open Font License (OFL) - Dapat mengonversi, menggunakan, memodifikasi, mendistribusikan (dengan atribusi). Lisensi Apache - Mirip dengan OFL, memungkinkan penggunaan komersial. Gratis untuk penggunaan pribadi - Biasanya memungkinkan konversi untuk proyek pribadi saja. Lisensi komersial - Periksa syarat; biasanya memungkinkan konversi untuk kasus penggunaan yang dibeli. Lisensi desktop - Mungkin tidak menyertakan hak penggunaan web (memerlukan lisensi web terpisah).

Praktik aman: Baca lisensi sebelum mengonversi, Simpan file lisensi dengan font yang dikonversi, Jangan distribusikan font komersial yang telah dikonversi tanpa izin, Beli lisensi yang sesuai untuk proyek komersial, Gunakan font sumber terbuka (Google Fonts) jika memungkinkan, Edukasi klien tentang lisensi font, Hormati kekayaan intelektual pencipta font. Jika ragu, hubungi pencipta font atau gunakan font gratis/sumber terbuka.

Bisakah saya mengonversi font untuk aplikasi seluler?

Format font untuk aplikasi seluler: iOS (iPhone/iPad) - Mendukung TTF, OTF (lebih disukai). Sertakan font dalam bundel aplikasi. Daftarkan di Info.plist. Android - Mendukung TTF, OTF. Tempatkan di folder assets/fonts. Muat secara programatis atau melalui XML. Konversi ke TTF atau OTF untuk kompatibilitas maksimum di berbagai platform. Aplikasi seluler tidak menggunakan font web (WOFF/WOFF2).

Implementasi font seluler: Untuk iOS: Tambahkan file font ke proyek Xcode, Tambahkan nama font ke Info.plist (array UIAppFonts), Gunakan dalam kode: UIFont(name: 'FontName', size: 16). Untuk Android: Tempatkan font di assets/fonts/, Muat dalam kode: Typeface.createFromAsset(assets, 'fonts/fontname.ttf'), Gunakan dalam XML dengan atribut keluarga font. Kedua platform: OTF menyediakan lebih banyak fitur, TTF memiliki kompatibilitas yang sedikit lebih baik.

Tips font aplikasi seluler: Gunakan OTF untuk fitur tipografi yang lebih baik, Subset font jika memungkinkan (mengurangi ukuran aplikasi), Uji di berbagai perangkat, Pertimbangkan font variabel untuk penghematan ukuran (iOS 11+, Android 8+), Bundel hanya bobot yang diperlukan, Patuhi lisensi font (distribusi aplikasi adalah redistribusi), Uji rendering font di berbagai kepadatan layar, Sediakan font cadangan. File font seluler menambah ukuran unduhan aplikasi - optimalkan jika memungkinkan.

Apa format font terbaik untuk kinerja?

Perbandingan kinerja format font: WOFF2 - Kompresi terbaik (30% lebih kecil dari WOFF, 50% lebih kecil dari TTF), Dekompresi cepat, Didukung oleh semua browser modern, Pilihan terbaik untuk web. WOFF - Kompresi baik (40% lebih kecil dari TTF), Dukungan browser universal, Cadangan yang baik. TTF/OTF - Tanpa kompresi, File lebih besar, Memuat lebih lambat, Gunakan hanya untuk desktop. EOT - Hanya untuk IE, Warisan, Hindari.

Strategi optimisasi kinerja: Gunakan WOFF2 secara eksklusif untuk browser modern (dukungan 95%+), Subset font untuk menghapus karakter yang tidak digunakan (pengurangan ukuran 50-80%), Gunakan font variabel alih-alih beberapa file (pengurangan ukuran total 50-70%), Terapkan font-display: swap untuk kinerja yang lebih baik, Preload font kritis untuk mulai memuat segera, Cache font secara agresif (1 tahun), Gunakan service workers untuk menyimpan font secara lokal.

Contoh dunia nyata: Google Fonts menyajikan WOFF2 kepada browser modern (kinerja optimal). Amazon sangat menyubset font (hanya glyph yang digunakan). Apple menggunakan font variabel di situs terbaru (lebih sedikit permintaan HTTP). Medium memuat font kritis sebelumnya (render awal lebih cepat). Praktik terbaik: Konversi ke WOFF2, subset untuk bahasa Anda, ukur dampak, iterasi. Font yang dioptimalkan biasanya: 15-30KB (dibandingkan 150-300KB yang tidak dioptimalkan). Strategi font yang baik secara signifikan meningkatkan waktu muat halaman dan pengalaman pengguna.

Bagaimana cara mengatasi masalah konversi font?

Masalah umum konversi dan solusinya: Font tidak ditampilkan setelah konversi - Periksa sintaks @font-face CSS, verifikasi jalur file, pastikan header CORS untuk font lintas domain, uji di berbagai browser. Karakter hilang - Font asli mungkin tidak menyertakan karakter tersebut, coba format sumber yang berbeda, pastikan dukungan Unicode di kedua format. Ukuran file terlalu besar - Gunakan WOFF2 untuk kompresi yang lebih baik, subset font untuk menghapus glyph yang tidak terpakai, hapus fitur font yang tidak perlu.

Masalah spesifik format: WOFF2 tidak berfungsi - Periksa dukungan browser (IE tidak didukung), pastikan format() yang tepat di CSS, verifikasi file tidak korup. Masalah EOT - EOT hanya untuk IE, gunakan komentar kondisional untuk IE, verifikasi dukungan versi IE. Masalah font SVG - Font SVG sudah tidak digunakan, konversi ke WOFF/WOFF2 sebagai gantinya, dukungan browser terbatas. Masalah PostScript (PFB/PFA) - Ini untuk cetak/desktop, bukan web, konversi ke OTF untuk penggunaan desktop.

Daftar periksa debugging: Verifikasi font sumber berfungsi sebelum konversi, Periksa font yang dikonversi dengan alat penampil font, Validasi sintaks CSS @font-face, Uji di berbagai browser, Periksa alat pengembang browser untuk kesalahan pemuatan font, Verifikasi tipe MIME yang benar di server (font/woff2, font/woff, font/ttf), Pastikan header CORS jika memuat dari domain yang berbeda, Coba pengaturan konversi yang berbeda, Uji dengan font yang lebih sederhana terlebih dahulu, Periksa file font tidak rusak. Sebagian besar masalah adalah konfigurasi CSS/server, bukan kualitas konversi.