Fon web masih peningkatan prestasi paling mudah di kebanyakan laman

Corak yang terus muncul

Jika anda mengaudit sepuluh laman web produksi secara rawak hari ini, anda akan menemui situasi fon yang hampir sama pada kebanyakannya:

• Enam hingga sepuluh fail fon dimuatkan pada laman utama
• Semuanya dalam WOFF2 (baik) tetapi tanpa strategi font-display (buruk)
• Beberapa berat dan gaya yang tidak digunakan di mana-mana pada halaman
• Seluruh tindanan disajikan daripada domain pihak ketiga (biasanya Google Fonts) dengan semua kos DNS, TLS dan privasi yang menyertainya
• Tiada subset unicode-range, jadi setiap pelawat memuat turun glif Cyrillic dan Greek walaupun halaman dalam bahasa Inggeris

Ini bukan masalah yang unik kepada laman kecil. Banyak halaman pemasaran yang dibiayai dengan baik masih memuatkan 600 KB fon sebelum perenggan pertama boleh dipaparkan. Sebaik sahaja anda mula menyedari coraknya, anda tidak akan dapat berhenti melihatnya.

Pembaikannya bukan sesuatu yang eksotik. Ia hanyalah beberapa teknik yang sudah difahami dengan baik dan telah berada dalam pelayar selama bertahun-tahun.

Gunakan satu fon berubah-ubah dan bukannya enam fon statik

Jika anda memuatkan Inter Regular, Inter Medium, Inter SemiBold, Inter Bold dan versi italicnya, anda sedang memuat turun kira-kira enam kali lebih banyak bait daripada yang diperlukan. Satu fon berubah-ubah Inter merangkumi seluruh paksi berat (dan condong, dalam sesetengah binaan) dalam satu fail yang hanya sedikit lebih besar daripada dua berat statik.

Kisah sokongan pelayar sudah selesai bertahun-tahun lalu — fon berubah-ubah berfungsi di semua tempat yang penting. Keraguan yang masih ada kebanyakannya ialah ingatan kebiasaan yang diwarisi daripada era fon statik.

Peraturan praktikal: satu fail fon berubah-ubah bagi setiap skrip tulisan, bagi setiap keluarga. Latin dalam satu fail, Cyrillic dalam fail lain, Greek dalam fail ketiga, dimuatkan secara bersyarat dengan unicode-range. Itu sahaja.

Tetapkan font-display yang munasabah

Tingkah laku lalai apabila fon tersuai masih dimuatkan ialah memaparkan tiada apa-apa — teks tidak kelihatan — sehingga tiga saat. Ini lalai yang paling buruk. Pengguna melihat halaman kosong dan menganggap ada sesuatu yang rosak.

Tambahkan ini pada setiap peraturan @font-face:

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

swap memaparkan fon sandaran serta-merta dan menukarnya kepada fon tersuai apabila ia selesai dimuatkan. Pengguna boleh membaca halaman dari milisaat sifar. Komprominya ialah sedikit anjakan susun atur apabila pertukaran berlaku, yang anda kurangkan dengan teknik seterusnya.

Padankan metrik fon sandaran anda

Kerlipan teks tanpa gaya hanya terasa mengganggu apabila fon sandaran dan fon tersuai mempunyai metrik yang sangat berbeza. CSS moden membetulkannya dengan size-adjust, ascent-override dan rakan-rakannya:

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

Dengan metrik fon sandaran ditala, pertukaran itu hampir tidak terasa — perkataan menempati ruang mendatar yang sama sebelum dan selepas fon tersuai tiba.

Kerja --allow-fallback-font-metrics Google kini merupakan sokongan pelayar asas, dan terdapat saluran alat (pustaka fontaine dan yang seumpamanya) yang mengira nombor yang betul untuk anda dalam beberapa saat.

Hos sendiri

Google Fonts mudah, percuma, dan membawa dua kos sebenar:

1. Jabat tangan TLS kedua. Walaupun dengan HTTP/3 dan penggabungan sambungan, origin tambahan jarang benar-benar percuma.
2. Soalan privasi dan pematuhan. Beberapa mahkamah Eropah telah memutuskan bahawa memuatkan Google Fonts daripada fonts.gstatic.com merupakan penghantaran data peribadi (alamat IP) kepada pihak ketiga. Hos sendiri menghapuskan persoalan itu sepenuhnya.

Saluran muat turun dan hos ialah:

1. Dapatkan fail WOFF2 (binaan berubah-ubah jika wujud)
2. Jadikannya subset kepada skrip tulisan yang sebenarnya digunakan audiens anda
3. Sajikannya daripada origin yang sama seperti seluruh laman anda, dengan Cache-Control: max-age=31536000, immutable yang panjang
4. Pramuat berat paling kritikal: <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-var.woff2" crossorigin>

Itulah keseluruhan salurannya. Ia mengambil masa satu petang untuk laman sedia ada, dan anda hampir tidak akan kembali kepada cara lama.

Bila patut melangkau fon tersuai sepenuhnya

Perkara ini wajar disebut dengan jelas: bukan setiap laman memerlukan fon tersuai. Tindanan fon sistem kini benar-benar cantik pada setiap sistem operasi:

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

Beratnya betul, metriknya betul, pemaparannya ditala untuk peranti, dan kos bait atas talian ialah tepat sifar. Untuk laman alat, aplikasi dalaman, portfolio yang mengutamakan kandungan, atau apa-apa yang ditujukan kepada pengguna pada rangkaian perlahan, tindanan sistem ialah jawapan yang betul.

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

💡 Cuba ini: Tukar fail TTF atau OTF anda kepada WOFF2 moden dengan CSS sedia digunakan menggunakan Webfont Generator, iaitu pertukaran format yang disyorkan oleh siaran tersebut.

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

Ringkasan yang jujur

Untuk laman kecil yang tipikal, empat langkah merangkumi keseluruhan kisah prestasi fon web:

1. Satu fon berubah-ubah bagi setiap keluarga bagi setiap skrip tulisan
2. font-display: swap dengan metrik fon sandaran yang dipadankan
3. Dihos sendiri dengan pengepala cache yang panjang dan preload untuk berat kritikal
4. Atau langkau fon sepenuhnya dan gunakan tindanan sistem

Lakukan ini sekali dan anda mendapatkan semula beberapa ratus kilobait daripada laman utama, memperoleh beberapa ratus milisaat prestasi yang dirasakan, dan menghapuskan satu kebergantungan pihak ketiga di sepanjang jalan. Hanya sedikit perubahan mempunyai nisbah usaha kepada pulangan yang lebih baik.