Anda sedang memuat font dengan cara yang salah (dan ini merusak performa)

• Webfont adalah elemen visual situs web yang membentuk brand dan pengalaman pengguna, serta berdampak langsung pada performa dan aksesibilitas
• Cara memuat font yang salah menimbulkan masalah FOUT (flash of unstyled text) atau FOIT (flash of invisible text), yang berdampak negatif pada Core Web Vitals
• Format WOFF2 adalah format font modern dan efisien yang didukung oleh sebagian besar browser terbaru, dan dapat meningkatkan performa dengan menghapus format legacy yang tidak perlu
• Strategi font subsetting dan preload sangat penting untuk mengurangi transfer data yang tidak perlu dan meningkatkan kecepatan muat halaman
• Dengan memanfaatkan system font stack dan CSS descriptor, perpindahan layout (CLS) saat font dimuat dapat diminimalkan untuk menghadirkan pengalaman pengguna yang stabil

---

Sejarah singkat webfont

Webfont adalah elemen inti dalam desain web dan pengalaman pengguna, tetapi meski penting, banyak orang masih menggunakannya dengan cara yang keliru. Berikut ringkasan perkembangan webfont.

• Era "web-safe"

  • Pada awal web, hanya font web-safe seperti Arial dan Times New Roman yang bisa digunakan, sementara font kustom digantikan dengan gambar
  • Rendering font berbeda di tiap browser, sehingga sulit mempertahankan desain yang konsisten

• Hack sebelum @font-face: sIFR dan Cufón

  • sIFR: menggunakan Flash untuk merender teks secara dinamis, tetapi berat dan buruk dari sisi aksesibilitas
  • Cufón: menyisipkan font dengan mengubahnya menjadi grafik vektor lewat JavaScript, tetapi lambat dan tetap memiliki masalah aksesibilitas

• Munculnya @font-face

  • @font-face memungkinkan penyisipan font kustom lewat CSS, tetapi kompleks karena tiap browser meminta format berbeda (EOT, font SVG, TTF/OTF)
  • Masalah lisensi font dan pembajakan ilegal pun marak terjadi

• Layanan komersial: Typekit dan kawan-kawan

  • Typekit (sekarang Adobe Fonts) adalah layanan berlangganan yang menyelesaikan masalah lisensi dan kompatibilitas, serta menyediakan font melalui snippet JavaScript
  • Pola ketergantungan pada skrip pihak ketiga ini terus berlanjut hingga sekarang

• Hack kompatibilitas dan cara mem-bypass

  • Dulu perlu meng-host banyak format atau menambahkan perbaikan JavaScript untuk mengatasi FOUT dan FOIT
  • Ada juga upaya memakai icon font untuk mengatasi kekurangan glyph

• Google Fonts dan ledakan "font gratis"

  • Google Fonts menghadirkan kemudahan memuat font melalui font berlisensi terbuka yang gratis, tetapi juga memunculkan masalah baru seperti potensi pelanggaran GDPR dan kecepatan muat yang lambat
  • Tidak seperti font komersial yang sulit dioptimalkan karena batasan lisensi, Google Fonts bisa digunakan dengan lebih bebas

Cara kerja font (dasar)

Font bukan sekadar pengaturan CSS sederhana, melainkan elemen kompleks yang sangat terlibat dalam rendering pipeline browser.

• Format: dari TTF ke WOFF2

  • TTF/OTF: format berat yang berorientasi desktop
  • WOFF2: format webfont modern dan efisien yang menggunakan kompresi Brotli, cocok untuk sebagian besar proyek

• Rendering pipeline

  • Pemuatan font melewati tahapan registrasi, style resolution, font matching, glyph coverage, request, display phase, dan decoding and shaping
  • Pengaturan font-display (swap, block, fallback, optional) menentukan bagaimana teks ditampilkan

• Metrik

  • Metrik seperti ascent, descent, dan line gap menentukan tinggi dan jarak font
  • Saat font diganti, ketidakcocokan metrik bisa menyebabkan layout shift (CLS)

• Gaya sintetis

  • Jika browser tidak menemukan font weight atau style yang diminta, browser akan membuat bold atau italic palsu sehingga kualitas menurun
  • Pembuatan gaya palsu ini bisa dicegah dengan font-synthesis: none;

• Cakupan glyph

  • Font tidak selalu memuat semua karakter, dan glyph yang hilang akan dirender dengan fallback font, yang menimbulkan masalah konsistensi
  • Gunakan unicode-range agar hanya glyph yang dibutuhkan yang dimuat

Dasar performa dan strategi

Font memengaruhi critical rendering path, dan pengelolaan yang buruk dapat menurunkan performa.

• Ukuran file

  • Satu font family bisa mencapai 800KB, dan memasukkan glyph yang tidak perlu akan membuang data
  • Ukuran bisa dioptimalkan dengan font subsetting agar hanya glyph yang dibutuhkan yang dikirim

• Layout shift

  • Perbedaan metrik antara fallback font dan font kustom dapat memicu CLS
  • Gunakan CSS descriptor seperti size-adjust dan ascent-override untuk menstabilkan layout

• CSS descriptor modern

  • font-display: swap; menampilkan fallback font segera sehingga rendering lebih stabil
  • unicode-range memungkinkan hanya glyph untuk skrip tertentu yang dimuat

Variable font: janji vs realitas

Variable font dapat meningkatkan efisiensi dengan mendukung beragam style dan weight dalam satu file.

• Janji

  • Menggabungkan banyak file statis menjadi satu file
  • Mendukung tipografi responsif yang bisa menyesuaikan secara dinamis dengan ukuran viewport

• Realitas

  • Jika weight yang dibutuhkan sedikit, variable font justru bisa lebih berat
  • Dukungan browser pada beberapa axis masih terbatas, dan masalah lisensi bisa muncul

• Strategi performa

  • Pilih hanya axis yang diperlukan, dan optimalkan ukuran file dengan subsetting per skrip
  • Pastikan memang ada keuntungan nyata dibanding font statis

• Contoh penggunaan axis variable font di CSS

  @font-face {  
    font-family: "Acme Variable";  
    src: url("/fonts/acme-variable.woff2") format("woff2-variations");  
    font-weight: 100 900;  
    font-display: swap;  
  }  
  h1 {  
    font-family: "Acme Variable", system-ui, sans-serif;  
    font-weight: 700;  
  }  
  

System stack dan CDN

Menggunakan system font stack tanpa font kustom dapat memberikan pemuatan instan dan pengalaman yang terasa familier.

• System font stack

  • Stack yang terdiri dari font seperti -apple-system dan Segoe UI dapat menjaga konsistensi di semua platform
  • Untuk rendering emoji, system font memberikan performa yang lebih baik

• CDN dan hosting pihak ketiga

  • Google Fonts berpotensi melanggar GDPR karena kebocoran data
  • Dengan self-hosting, latensi lookup DNS dapat dikurangi dan caching bisa dikendalikan

Fallback font dan pencocokan

Fallback font menentukan pengalaman pengguna sebelum font kustom dimuat, sehingga perlu dirancang dengan stabil.

• Merancang fallback font

  • Atur x-height dan lebar karakter agar mirip dengan font kustom untuk meminimalkan CLS
  • Gunakan font-size-adjust untuk menyesuaikan ukuran fallback font

• Mencocokkan font kustom dan fallback

  • Pilih font dengan proporsi yang mirip, lalu gunakan penyesuaian metrik untuk menjaga stabilitas layout
  • Utamakan stabilitas dan keterbacaan dengan mempertimbangkan perbedaan rendering antar platform

Preloading dan strategi pemuatan

Strategi pengiriman font sangat memengaruhi pengalaman pengguna.

• Hasil pemuatan

  • FOIT membuat teks tidak terlihat pada jaringan lambat
  • font-display: swap; adalah nilai default yang aman karena langsung menampilkan fallback font

• Preloading

  • Gunakan <link rel="preload" as="font"> untuk segera memulai pemuatan font
  • Header CORS dan kecocokan URL yang tepat wajib dipenuhi

• Early Hints (HTTP 103)

  • Server dapat menginstruksikan browser untuk mengambil font sebelum respons HTML tiba, sehingga waktu muat berkurang
  • Hanya tandai font kritis sebagai hint agar bandwidth tidak terbuang

• Font Loading API

  • Font Loading API memungkinkan kontrol yang lebih detail atas pemuatan font di situs dinamis

Format file: WOFF2, WOFF, TTF, dan beban legacy

WOFF2 adalah format paling efisien untuk web modern, dan dalam kebanyakan kasus satu format saja sudah cukup.

• Gunakan hanya WOFF2 untuk menghapus format yang tidak perlu
• Embedding base64 sebaiknya dihindari karena mengganggu caching

Icon font: Font Awesome dan kesalahan besar

Icon font tidak lagi cocok untuk web modern karena masalah aksesibilitas dan performa.

• Ikon SVG lebih semantik, fleksibel, dan bisa di-styling dengan CSS
• Jika masih memakai icon font lama, perlu subsetting dan rencana migrasi ke SVG

Melampaui Latin: skrip non-Latin, bahasa RTL, dan emoji

Skrip non-Latin dan bahasa RTL membutuhkan shaping dan metrik yang lebih kompleks.

• Saat melakukan subsetting, perhatikan karakteristik tiap skrip agar tidak terjadi error rendering
• Untuk emoji, gunakan system font demi konsistensi dan performa yang lebih baik

Masa depan webfont: standar yang berkembang dan risiko modern

Properti CSS baru, variable font, dan color font terus memajukan tipografi web.

• Font Loading API dan Early Hints membantu mengatasi masalah latensi di SPA
• Font harus diperlakukan sebagai infrastruktur, dengan performa dan aksesibilitas sebagai prioritas utama

Tools dan audit

Performa font bisa diukur dengan alat seperti DevTools, Lighthouse, dan Glyphhanger.

• Gunakan alat font subsetting untuk menghapus glyph yang tidak perlu
• Gunakan Font Style Matcher untuk menyesuaikan metrik fallback font

Manifesto untuk menangani font dengan benar

Font bukan sekadar dekorasi, melainkan elemen inti dari pengalaman pengguna dan performa.

• Utamakan sistem: mulai dari system font stack yang kuat
• Subsetting cerdas: kirim hanya glyph yang diperlukan
• Khusus WOFF2: buang format legacy
• Hormati skrip global: dukung beragam bahasa dan emoji
• Pengujian itu penting: uji di berbagai jaringan dan perangkat

Perlakukan font sebagai konten sekaligus brand, dan terapkan pengelolaan yang ketat terhadap performa dan aksesibilitas

[nemorize]

Cufón, nama yang sudah lama sekali tidak terdengar, ya wkwk