TTF vs OTF vs WOFF: Format Font untuk Diinstal dan untuk Web

TrueType adalah yang tertua dari keempatnya. Apple merilisnya bersama System 7 pada 1991, dan Microsoft mengadopsinya untuk Windows 3.1 setahun kemudian. Font TrueType menggambarkan setiap huruf dengan kurva kuadratik, yang punya satu titik kontrol per segmen lengkung dan ringan digambar oleh perangkat keras generasi awal. Format ini juga membawa hinting: program kecil di dalam font yang menggeser batang dan lengkung huruf agar pas dengan grid piksel, sehingga teks tetap tajam di layar beresolusi rendah. Ekstensi .ttf sampai sekarang menandai font dengan outline kuadratik ini.

OpenType, yang diumumkan Microsoft dan Adobe pada 1996, adalah wadah, bukan jenis outline baru. Ia bisa menampung outline TrueType atau outline PostScript yang disimpan dalam tabel CFF, yang memakai kurva kubik dengan dua titik kontrol per segmen. Di sekitar outline itu, OpenType menambahkan tabel tata letak untuk tipografi lanjutan: ligatur standar dan diskresioner, small caps, angka gaya lama, stylistic set, alternatif kontekstual, dan kerning. Menurut kebiasaan, font OpenType berbasis CFF disimpan sebagai .otf, sedangkan font OpenType dengan outline TrueType tetap memakai ekstensi .ttf.

WOFF dan WOFF2 adalah wadah yang dibuat khusus untuk web. WOFF disusun pada 2009 dan menjadi Rekomendasi W3C pada 2012; format ini mengompres setiap tabel font dengan zlib. WOFF2 menjadi Rekomendasi W3C pada 2018, beralih ke Brotli dan memproses data glif terlebih dahulu, sehingga biasanya sekitar 30% lebih kecil daripada WOFF. Tiga format sampingan melengkapi gambaran ini. EOT adalah format web milik Internet Explorer sendiri, font SVG adalah solusi sementara awal yang hanya berlaku di Safari, dan font variabel, yang ditambahkan di OpenType 1.8 pada 2016, mengemas seluruh rentang ketebalan atau lebar huruf dalam satu file.

Instal TTF atau OTF dan tidak perlu pusing memilih di antara keduanya. Windows 10 dan 11 menginstal keduanya lewat klik kanan lalu Instal, macOS membuka keduanya di Font Book, dan desktop Linux mengenalinya dari ~/.local/share/fonts begitu cache font diperbarui. Word, Photoshop, aplikasi desktop Figma, Affinity, dan LibreOffice semuanya membaca kedua format. Jika seorang desainer mengirimkan keluarga font yang sama dalam dua versi, OTF biasanya versi asli yang digambar perancang hurufnya, sedangkan TTF adalah hasil konversi untuk perangkat lunak lama.

Kasus ketika perbedaannya penting sangat sempit. Sebagian program mesin potong dan bordir, game engine, serta pustaka layar mikrokontroler hanya memahami outline TrueType, sehingga OTF berbasis CFF tampak rusak di sana dan perlu dikonversi dari OTF ke TTF. Sebaliknya, tidak ada sistem desktop yang bisa langsung menginstal WOFF atau WOFF2: file itu dikemas untuk browser. Instal hanya satu versi dari sebuah keluarga font, karena TTF dan OTF dengan nama internal yang sama membingungkan menu font dan aplikasi bisa memilih yang salah.

Semua versi terbaru Chrome, Edge, Firefox, dan Safari membaca WOFF2, jadi format ini sebaiknya menjadi sumber pertama, dan sering kali satu-satunya, dalam aturan @font-face Anda. Tambahkan baris WOFF setelahnya hanya jika analitik Anda masih menunjukkan browser dari sebelum sekitar 2016, seperti WebView Android lama atau browser bawaan TV. Browser membaca daftar src secara berurutan dan mengunduh format pertama yang didukungnya, artinya cadangan itu tidak membebani pengunjung dengan browser modern sama sekali. Jika Anda sudah punya file TrueType versi desktop, TTF ke WOFF menghasilkan cadangan itu dalam sekali proses.

Hindari menyajikan TTF atau OTF mentah di situs kecuali platform memaksa, seperti yang dilakukan sebagian pembuat email dan sistem konten lama. Browser menampilkannya dengan baik, tetapi file dikirim tanpa kompresi kecuali server Anda menerapkan gzip pada font, dan siapa pun mendapat salinan desktop yang siap diinstal. Baris font-display: swap di bawah ini menyuruh browser langsung menampilkan teks dengan font cadangan lalu menggantinya dengan font Anda begitu font itu tiba, alih-alih menyembunyikan teks hingga 3 detik selama menunggu.

Simpan file di domain Anda sendiri jika memungkinkan. Chrome, Safari, dan Firefox kini memisahkan cache per situs, sehingga font yang diambil dari CDN bersama tidak lagi dipakai ulang antarsitus, sementara self-hosting menghemat satu pencarian DNS dan satu koneksi. Tambahkan <link rel="preload"> hanya untuk satu atau dua ketebalan yang tampil di layar pertama; melakukan preload untuk setiap gaya justru berebut bandwidth dengan gambar Anda.

Satu ketebalan teks Latin yang disimpan sebagai WOFF2 biasanya berukuran 20–60 KB. Font yang sama sebagai TTF tanpa kompresi sering dua sampai tiga kali lebih besar, dan keluarga font yang juga mencakup aksara Yunani, Sirilik, dan Vietnam bisa melebihi 200 KB per gaya. Font Tionghoa, Jepang, dan Korea berada di skala yang sama sekali berbeda: satu ketebalan CJK lengkap memuat puluhan ribu glif dan biasanya berukuran beberapa megabyte bahkan setelah dikompres menjadi WOFF2, terlalu besar untuk dimuat sebelum halaman bisa menampilkan teksnya.

Subsetting membuang karakter yang tidak pernah dipakai halaman, dan unicode-range memberi tahu browser karakter mana yang dicakup sebuah file, sehingga file itu baru diunduh ketika halaman benar-benar memuat karakter tersebut. Google Fonts memakai cara ini untuk CJK, memotong setiap keluarga font menjadi banyak irisan kecil yang dimuat sesuai kebutuhan. Untuk font Anda sendiri, opsi Pertahankan karakter di konverter font memangkas file menjadi Latin + aksen (Eropa) atau Hanya karakter yang saya ketik sebelum sampai ke server Anda; pilih Semua karakter untuk font apa pun yang Anda instal di komputer.

TTF ke OTF dan sebaliknya hanyalah pergantian wadah untuk font bercita rasa TrueType: tabel outline, metrik, dan fitur tata letak berpindah tanpa diubah. Kasus yang menarik adalah OTF berbasis CFF yang diubah menjadi TTF. Kurva kubik tidak bisa disalin begitu saja ke format outline kuadratik, jadi setiap kurva digambar ulang sebagai satu atau beberapa segmen kuadratik dengan toleransi yang jauh lebih kecil dari satu piksel. Hint PostScript juga tidak bisa diterjemahkan, itulah sebabnya alat OTF ke TTF menawarkan Hinting dengan pilihan Pertahankan, Hapus, atau Auto-hint.

Mengubah font web kembali menjadi font desktop adalah konversi yang paling sering dilakukan. Anda mengunduh tema atau kit desain, hanya menemukan file .woff atau .woff2, lalu butuh font itu di Word atau Figma. WOFF ke TTF melepas kompresinya dan menulis ulang tabel aslinya, sehingga glif, kerning, dan fitur keluar persis seperti saat masuk. Yang tidak bisa dipulihkan adalah apa pun yang sudah dibuang versi web, seperti karakter yang dihapus lewat subsetting atau hint yang dibuang demi menghemat byte.

Sebagian besar masalah konversi bermuara pada tiga hal: hinting, fitur tata letak, dan sumbu variabel. Daftar di bawah membahas gejala yang kemungkinan Anda lihat setelah konversi beserta penyebab yang biasa ada di baliknya.

File font adalah basis data kecil, dan tiga bagiannya menjawab sebagian besar pertanyaan. Tabel name menyimpan nama keluarga, nama gaya, versi, baris hak cipta, dan sering kali URL lisensi; Font Book di macOS menampilkannya di tampilan info, dan pratinjau font Windows menampilkan baris-baris pertamanya. Cakupan glif menunjukkan bahasa apa saja yang bisa ditulis dengan font itu: font yang hanya berisi Latin dasar diam-diam beralih ke huruf lain untuk karakter Polandia, Turki, atau Vietnam yang tidak dimilikinya. Untuk font variabel, tabel fvar mencantumkan sumbunya, misalnya ketebalan dari 100 hingga 900 atau lebar dari 75 hingga 125.

Lisensi layak diperiksa sekali sebelum apa pun dipasang online. Foundry komersial sering menjual lisensi desktop, web, dan aplikasi secara terpisah, dan lisensi desktop biasanya mencakup pemasangan di sejumlah komputer tertentu, tetapi tidak mencakup penyajian file kepada pengunjung situs web atau penyertaannya dalam aplikasi seluler. Konversi mengubah format file sebuah font, tidak pernah lisensinya, jadi WOFF2 yang dibuat dari TTF desktop membawa ketentuan yang sama dengan TTF tersebut. Font berlisensi SIL Open Font License, yang mencakup sebagian besar koleksi Google Fonts, boleh dikonversi, di-subset, dan di-host sendiri.

Sebagian besar pertanyaan soal font bermuara pada di mana file itu akan berada. Jika diinstal di komputer atau dikemas dalam aplikasi, pakai TrueType atau OpenType; jika diunduh browser, pakai wadah web yang terkompresi. Tabel ini memetakan keperluan umum ke format yang sebaiknya dipilih dan konversi yang membawa Anda ke sana, sehingga Anda bisa melewati sejarahnya dan langsung menuju file yang dibutuhkan.

Dua keperluan berada di antara kedua kategori. EPUB 3 menerima TTF, OTF, dan WOFF, jadi ebook bisa memakai kedua kelompok format, sedangkan file font SVG berasal dari garis keturunan yang sama dengan grafik vektor, tetapi kini terutama penting bagi sebagian perangkat lunak plotter dan grafir, bukan bagi browser.