Ubah TTF ke WOFF2
Meng-hosting font sendiri dimulai di sini: WOFF2 adalah format yang diunduh lebih dulu oleh semua browser saat ini, dan merupakan wadah terkecil untuk data TrueType yang sudah Anda miliki. Halaman ini juga menuliskan aturan CSS untuk memuatnya.
Konverter Font
atau jatuhkan file TTF, OTF, WOFF … di sini ·
Maks. 95 MB per file· Hingga 20 file· Dihapus setelah 30 menit
File diproses di server kami dan dihapus setelah 30 menit.
Menghapus aksara yang tidak Anda gunakan dapat memperkecil font web dari ratusan KB menjadi di bawah 30 KB. Pertahankan semua karakter untuk font yang Anda pasang di komputer.
Tempel teks atau karakter yang harus dicakup font, mis. kata pada logo atau judul. Semua karakter lain dihapus.
Hint mempertajam teks kecil di layar Windows. Menghapusnya sering menghemat 10–30% pada font web; auto-hint menambahkannya ke font yang belum memilikinya.
Biarkan kosong untuk mempertahankan nama asli. Dengan mengganti nama, Anda dapat memasang font hasil konversi di samping font asli tanpa konflik.
Mis. Regular, Bold, Italic. Biarkan kosong untuk mempertahankan nama gaya asli.
Cara menggunakan alat ini
- 1
Unggah file TTF
Tambahkan setiap ketebalan dan gaya yang akan Anda pakai, hingga 20 file masing-masing maksimal 95 MB. TTF variabel juga bisa dan sumbu-sumbunya tetap dipertahankan.
- 2
Biarkan CSS aktif, buat subset jika bisa
Sertakan CSS @font-face sudah dicentang. Di Pengaturan lanjutan, atur Pertahankan karakter ke Latin Dasar atau Latin + aksen jika situs Anda berbahasa Barat atau Indonesia, dan pertimbangkan mengatur Hinting ke Hapus.
- 3
Konversi ke WOFF2
Tekan Konversi ke WOFF2 lalu unduh font beserta file .css. Unggah keduanya ke situs Anda, lalu tautkan stylesheet-nya atau tempel aturannya ke CSS Anda sendiri.
Bagaimana cara mengubah TTF ke WOFF2 untuk situs web saya?
Unggah file .ttf, biarkan Sertakan CSS @font-face tercentang, lalu tekan Konversi ke WOFF2. Anda mendapat file .woff2 plus file .css berisi aturan @font-face yang mengarah ke file tersebut.
Mengapa WOFF2 adalah format web font yang layak dipakai
TTF berisi data tabel tanpa kompresi: outline, metrik, kerning, nama. WOFF2, yang diterbitkan sebagai W3C Recommendation pada 2018, menyimpan tabel yang persis sama tetapi memprosesnya dengan Brotli, algoritme kompresi yang dirilis Google pada 2015, setelah lebih dulu menata ulang outline glyph agar lebih mudah dikompres. Pengujian Google sendiri mendapati WOFF2 rata-rata sekitar 30% lebih kecil daripada format WOFF yang lebih lama, dan browser memulihkan data font asli setelah diunduh, jadi bentuk huruf sama sekali tidak berubah.
Font menahan proses render, sehingga ukurannya lebih penting daripada yang terlihat dari jumlah kilobyte. Sebelum web font tiba, browser menyembunyikan teks atau menampilkan font cadangan, dan penggantian yang terlambat bisa menggeser tata letak. File yang lebih kecil mempersempit jeda itu, dan dua opsi di sini mempersempitnya lagi: Pertahankan karakter membuang glyph yang tidak pernah tampil di halaman Anda, dan Hinting yang diatur ke Hapus membuang instruksi yang memang diabaikan ponsel dan layar berkepadatan tinggi. Simpan master TTF untuk pemakaian desktop; WOFF2 ke TTF bisa membongkar web font nanti, tetapi tidak bisa mengembalikan glyph yang sudah dibuang oleh subset.
Ukuran file TTF dibandingkan WOFF2
TTF, set karakter lengkap
100%
Tabel font tanpa kompresi, seperti yang terpasang di desktop
WOFF2, subset Latin Dasar
sering 10–25%
Kompresi Brotli plus glyph lebih sedikit; bervariasi menurut font
Aturan @font-face untuk font WOFF2
@font-face {
font-family: "Nusantara Sans";
src: url("/fonts/nusantara-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}Dukungan browser untuk WOFF2, rilis demi rilis
2014
Chrome 36
Browser Google menjadi yang pertama mendekode WOFF2 secara bawaan.
2015
Firefox 39
Mozilla mengaktifkan dekode WOFF2 secara bawaan.
2016
Edge 14
Edge versi awal dari Microsoft menambahkan WOFF2 lewat Windows 10 Anniversary Update.
2018
W3C Recommendation
Spesifikasinya final; saat itu Safari di macOS dan iOS juga sudah mendekode WOFF2.
TTF
Font TrueType
TTF adalah format font TrueType yang dikembangkan oleh Apple pada akhir 1980-an dan dirilis pada 1991, lalu dilisensikan kepada Microsoft. Format ini mendefinisikan garis bentuk glyph dengan kurva kuadratik dan menyertakan instruksi hinting yang membuat teks tampak tajam di layar. TrueType didukung oleh setiap sistem operasi desktop, pengolah kata, dan aplikasi desain. Format ini tidak memiliki sebagian fitur tipografi lanjutan OpenType dan ukurannya lebih besar daripada format font web.
- Kompresi
- Lossless
- Transparansi
- –
- Animasi
- –
- Diperkenalkan
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 adalah versi kedua Web Open Font Format, berbasis kompresi Brotli milik Google dan diterbitkan sebagai W3C Recommendation pada 2018. Ukuran filenya sekitar 30% lebih kecil daripada WOFF, sehingga membantu halaman dimuat lebih cepat. Setiap browser modern mendukung WOFF2, dan format ini direkomendasikan untuk font web. Sistem operasi desktop dan aplikasi desain tidak dapat memasangnya secara langsung.
- Kompresi
- Lossless
- Transparansi
- –
- Animasi
- –
- Diperkenalkan
- 2018 · W3C (Google)
TTF ke WOFF2 mengemas font desktop ke dalam wadah terkompresi Brotli yang diutamakan browser, sehingga glyph yang sama sampai ke pengunjung dengan byte lebih sedikit; halaman kebalikannya tersedia bagi yang perlu memasang font yang ditemukan di web.
Tanya jawab TTF ke WOFF2
Apakah saya masih perlu cadangan TTF atau WOFF di samping WOFF2?
Untuk situs publik saat ini, biasanya tidak. Chrome, Edge, Firefox, dan Safari sudah bertahun-tahun membaca WOFF2, dan segelintir browser yang tidak bisa, seperti Internet Explorer 11, jarang sepadan dengan file tambahan. Tambahkan hasil TTF ke WOFF sebagai entri src kedua hanya jika analitik Anda menunjukkan pengunjung seperti itu.
Mengapa font WOFF2 saya masih di atas 100 KB?
Kompresi hanya memperkecil cara glyph disimpan, bukan jumlahnya. Font yang mencakup Latin, Sirilik, Yunani, dan Vietnam mengirimkan semuanya. Membuat subset hanya untuk aksara yang benar-benar ditampilkan itulah yang menurunkan font teks hingga puluhan kilobyte.
Apa fungsi font-display: swap pada web font WOFF2?
Properti ini meminta browser langsung menampilkan teks dengan font cadangan, lalu menggantinya dengan web font Anda begitu font itu tiba, alih-alih menyembunyikan teks selama pengunduhan. Tambahkan ke aturan @font-face seperti pada contoh di atas, atau pakai optional jika Anda lebih suka melewatkan penggantian yang terlambat di koneksi lambat.
Bisakah TTF dari Google Fonts diubah ke WOFF2 dan di-hosting sendiri?
Bisa. Keluarga font Google Fonts dirilis di bawah SIL Open Font License atau Apache License, dan keduanya mengizinkan konversi serta hosting sendiri. Meng-hosting file sendiri juga menghindari permintaan ke server pihak ketiga.
Apakah WOFF2 berfungsi di newsletter email?
Hanya di sebagian aplikasi email. Apple Mail dan iOS Mail memuat web font lewat @font-face, sedangkan Gmail dan sebagian besar versi Outlook mengabaikannya dan menampilkan font cadangan Anda. Selalu cantumkan font sistem yang aman di font stack sebuah email.