Perbedaan Font Format WOFF2, TTF, dan OTF untuk Website

Typography yang Membebani Website

Memilih *Font* (jenis huruf) yang tepat adalah salah satu aspek penting dalam desain web (UI). Jika kamu tidak ingin memakai font membosankan seperti Arial atau Times New Roman, kamu harus meng-import font khusus dari Google Fonts atau memasukkan file font (*self-hosting*) langsung ke dalam kodemu lewat perintah CSS @font-face.

Masalahnya, banyak pemula yang men-download font dari internet dalam format .TTF atau .OTF dan langsung memasukkannya ke website. Ini adalah praktik buruk yang membuat web-mu lambat!

1. TTF & OTF (Format Lama yang Usang untuk Web)

TTF (TrueType Font) dan OTF (OpenType Font) adalah format tradisional yang didesain untuk sistem operasi komputermu (Windows/Mac), BUKAN untuk website. Karena didesain untuk diinstal ke sistem, format ini membawa sangat banyak data ekstra yang tidak diperlukan di browser. Ukuran filenya sangat berat.

2. WOFF (Web Open Font Format)

Para pengembang standar internet sadar bahwa TTF terlalu berat. Mereka meramu ulang format font tersebut dan menambahkan fitur kompresi kompresi (pemampatan) khusus yang dinamakan WOFF (dibaca: Wof). WOFF pada dasarnya adalah file TTF yang dikompres, sehingga file font-mu jauh lebih kecil dan cepat di-download oleh browser pengguna.

3. WOFF2 (Raja Font Website Saat Ini)

Teknologi terus berkembang, dan lahirlah WOFF2. Ia adalah versi pembaruan yang memiliki algoritma kompresi tingkat tinggi (Brotli). Format WOFF2 mampu menekan ukuran file hingga 30% lebih kecil dibandingkan WOFF biasa. Hampir 100% browser modern masa kini (Chrome, Safari, Edge, Firefox Android/iOS) sangat mendukung WOFF2.

Apa yang Harus Dilakukan Developer?

Jika klienmu memberikan file font khusus dalam format TTF (misalnya Avenir-Bold.ttf), jangan langsung dimasukkan ke HTML/CSS. Carilah website Converter Font gratis di internet (seperti Transfonter) untuk mengubah file .ttf tersebut menjadi file .woff2.

Kesimpulan CSS (Best Practice)

Praktik standar untuk memuat font yang dijamin cepat dan tidak akan rusak di *browser* lawas sekalipun adalah dengan memanggil urutan ini di CSS: Panggil WOFF2 pertama karena paling cepat, jika browser pengguna terlalu jadul dan gagal membacanya, minta browser membaca WOFF sebagai cadangan.

@font-face {
  font-family: 'CustomFontKu';
  src: url('custom-font.woff2') format('woff2'),
       url('custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}