Web font masih menjadi peningkatan kinerja termudah di sebagian besar situs

Pola yang terus muncul

Jika Anda mengaudit sepuluh situs produksi secara acak hari ini, Anda akan menemukan situasi font yang kurang lebih sama pada sebagian besar situs:

• Enam hingga sepuluh file font dimuat di halaman beranda
• Semuanya dalam WOFF2 (bagus) tetapi tanpa strategi font-display (buruk)
• Beberapa bobot dan gaya yang tidak digunakan di mana pun pada halaman
• Seluruh stack disajikan dari domain pihak ketiga (biasanya Google Fonts) dengan semua biaya DNS, TLS, dan privasi yang menyertainya
• Tidak ada subsetting unicode-range, sehingga setiap pengunjung mengunduh glyph Kiril dan Yunani meskipun halaman berbahasa Inggris

Ini bukan masalah yang hanya terjadi pada situs kecil. Banyak halaman pemasaran dengan pendanaan baik masih memuat 600 KB font sebelum paragraf pertama bisa ditampilkan. Begitu Anda mulai melihat polanya, Anda tidak bisa tidak melihatnya.

Perbaikannya tidak rumit. Ini hanya beberapa teknik yang sudah dipahami dengan baik dan telah ada di browser selama bertahun-tahun.

Gunakan satu variable font alih-alih enam font statis

Jika Anda memuat Inter Regular, Inter Medium, Inter SemiBold, Inter Bold dan versi italic-nya, Anda mengunduh kira-kira enam kali lebih banyak byte daripada yang diperlukan. Satu variable font Inter mencakup seluruh sumbu bobot (dan slant, pada beberapa build) dalam satu file yang hanya sedikit lebih besar daripada dua bobot statis.

Cerita dukungan browser sudah selesai sejak lama — variable font berfungsi di semua tempat yang penting. Keraguan yang tersisa sebagian besar hanyalah memori kebiasaan dari era font statis.

Aturan praktisnya: satu file variable font per script, per family. Latin dalam satu file, Kiril dalam file lain, Yunani dalam file ketiga, dimuat secara kondisional dengan unicode-range. Itu saja.

Tetapkan font-display yang masuk akal

Perilaku default ketika font kustom masih dimuat adalah menampilkan tidak ada apa-apa — teks tak terlihat — hingga tiga detik. Ini adalah default terburuk. Pengguna melihat halaman kosong dan mengira ada sesuatu yang rusak.

Tambahkan ini ke setiap aturan @font-face:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

swap menampilkan font fallback segera dan menukar ke font kustom saat font tersebut selesai dimuat. Pengguna bisa membaca halaman sejak milidetik nol. Konsekuensinya adalah sedikit pergeseran layout saat pertukaran terjadi, yang Anda kurangi dengan teknik berikutnya.

Cocokkan metrik fallback Anda

Flash of unstyled text hanya terasa mengganggu ketika fallback dan font kustom memiliki metrik yang sangat berbeda. CSS modern memperbaiki ini dengan size-adjust, ascent-override, dan fitur sejenis:

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Dengan metrik fallback yang disetel, pertukaran nyaris tidak terasa — kata-kata menempati ruang horizontal yang sama sebelum dan sesudah font kustom tiba.

Pekerjaan Google's --allow-fallback-font-metrics kini menjadi dukungan browser baseline, dan ada pipeline tooling (library fontaine dan sejenisnya) yang menghitung angka yang tepat untuk Anda dalam hitungan detik.

Self-host

Google Fonts praktis, gratis, dan membawa dua biaya nyata:

1. Handshake TLS kedua. Bahkan dengan HTTP/3 dan connection coalescing, origin tambahan jarang benar-benar gratis.
2. Pertanyaan privasi dan kepatuhan. Beberapa pengadilan Eropa telah memutuskan bahwa memuat Google Fonts dari fonts.gstatic.com berarti mengirimkan data pribadi (alamat IP) ke pihak ketiga. Self-hosting menghapus pertanyaan itu sepenuhnya.

Pipeline download-and-host adalah:

1. Ambil file WOFF2 (variable build jika ada)
2. Subset ke script yang benar-benar digunakan audiens Anda
3. Sajikan dari origin yang sama dengan sisa situs Anda, dengan Cache-Control: max-age=31536000, immutable yang panjang
4. Preload bobot paling kritis: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Itulah seluruh pipeline. Ini memakan satu sore untuk situs yang sudah ada, dan Anda hampir tidak pernah ingin kembali.

Kapan sebaiknya melewati font kustom sepenuhnya

Perlu dikatakan secara jelas: tidak setiap situs membutuhkan font kustom. System font stack kini benar-benar indah di setiap sistem operasi:

font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, sans-serif;

Bobotnya tepat, metriknya tepat, rendering-nya disetel untuk perangkat, dan biaya byte yang dikirim lewat jaringan persis nol. Untuk situs tools, aplikasi internal, portofolio yang memprioritaskan konten, atau apa pun yang ditujukan bagi pengguna di jaringan lambat, system stack adalah jawaban yang benar.

<!-- tool-cta:start -->

💡 Coba ini: Konversi file TTF atau OTF Anda ke WOFF2 modern dengan CSS siap pakai menggunakan Webfont Generator, yang merupakan pergantian format yang direkomendasikan oleh postingan tersebut.

<!-- tool-cta:end -->

Ringkasan jujur

Untuk situs kecil yang umum, empat langkah mencakup seluruh cerita kinerja web-font:

1. Satu variable font per family per script
2. font-display: swap dengan metrik fallback yang dicocokkan
3. Self-hosted dengan header cache panjang dan preload untuk bobot kritis
4. Atau lewati font sepenuhnya dan gunakan system stack

Lakukan ini sekali dan Anda mendapatkan kembali beberapa ratus kilobyte dari halaman beranda, memenangkan beberapa ratus milidetik kinerja yang terasa, dan sekaligus menghapus dependensi pihak ketiga. Hanya sedikit perubahan yang punya rasio upaya terhadap hasil sebaik ini.