Cara mengehos fon secara setempat dan bukannya menggunakan Google Fonts

Mengapa hos sendiri Google Fonts?

Google Fonts menjadikan tipografi yang baik mudah dilaksanakan. Tambah helaian gaya, pilih beberapa berat, terbitkan halaman. Selama bertahun-tahun, itu ialah pilihan lalai yang munasabah untuk pasukan kecil.

Pertukarannya ialah pelayar setiap pelawat menghubungi perkhidmatan pihak ketiga untuk mendapatkan CSS fon dan fail fon. Itu membawa dua akibat.

Pertama, ia menambah kebergantungan luaran pada pemaparan. Jika CSS fon perlahan, disekat atau tidak tersedia di rantau atau rangkaian pengguna, halaman anda menunggu atau beralih kepada fon sandaran.

Kedua, ia menimbulkan persoalan privasi. Permintaan fon boleh mendedahkan alamat IP pengguna, user agent, konteks dasar perujuk dan maklumat masa kepada pihak ketiga. Google Fonts menyatakan bahawa ia tidak menetapkan kuki melalui Fonts API, tetapi “tiada kuki” tidak sama dengan “tiada data peribadi.” Di bawah GDPR, alamat IP masih boleh menjadi data peribadi mengikut konteks.

Mengehos fon sendiri tidak semestinya wajib untuk setiap laman web, dan ini bukan nasihat undang-undang. Tetapi untuk laman Eropah, laman sektor awam, penjagaan kesihatan, pendidikan, kewangan atau mana-mana pasukan yang cuba mengurangkan permintaan pihak ketiga yang tidak perlu, pengehosan setempat biasanya pilihan yang lebih bersih.

Ia juga sering menjadi kemenangan prestasi apabila dilakukan dengan baik. Perangkapnya ialah “dilakukan dengan baik.” Menyalin enam fail fon ke dalam /assets/fonts/ dan memuatkan semuanya pada setiap halaman boleh menjadi lebih buruk daripada menggunakan perkhidmatan yang dihos. Jika anda mahukan konteks prestasi yang lebih luas, tulisan kami sebelum ini tentang mengapa fon web masih merupakan kemenangan prestasi paling mudah di kebanyakan laman menghuraikan corak pembaziran yang biasa.

Apa yang berubah apabila anda mengehos sendiri

Apabila anda menggunakan Google Fonts dengan cara biasa, halaman anda melakukan ini:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Pelayar mula-mula meminta CSS daripada fonts.googleapis.com, kemudian memuat turun fail fon daripada fonts.gstatic.com.

Apabila anda mengehos sendiri, halaman anda sepatutnya meminta kedua-dua CSS dan fail fon daripada domain anda sendiri:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Itu menghapuskan permintaan fon pihak ketiga. Ia juga menjadikan anda bertanggungjawab untuk memilih format fail, pengepala cache, fon sandaran dan kemas kini.

Tanggungjawab itu wajar diambil serius. Fon berada pada laluan pemaparan kritikal. Persediaan fon yang lemah boleh menyebabkan teks tidak kelihatan, anjakan reka letak dan pemaparan pertama yang perlahan.

Langkah 1: Audit apa yang sebenarnya anda gunakan

Sebelum memuat turun apa-apa, senaraikan keluarga fon, berat, gaya dan set aksara yang benar-benar diperlukan oleh laman anda.

Laman pemasaran biasa mungkin memerlukan:

• Regular 400 untuk teks badan
• Semibold 600 atau bold 700 untuk tajuk dan butang
• Italic 400 hanya jika reka bentuk benar-benar menggunakan italik
• Set aksara Latin sahaja, melainkan laman menyokong lebih banyak bahasa

Berhati-hati dengan lalai sistem reka bentuk lama. Banyak laman memuatkan 300, 400, 500, 600, 700, italik dan berbilang skrip kerana seseorang pernah memilihnya dalam pemilih fon.

Dalam DevTools pelayar, buka panel Network, tapis mengikut “font,” muat semula halaman dan semak fail yang diminta. Kemudian periksa CSS anda untuk penggunaan font-weight. Jika CSS anda tidak pernah menggunakan 300, jangan hos 300.

Jika anda menyemak impaknya kemudian, Lighthouse boleh membantu, tetapi jangan anggap skornya sebagai keseluruhan cerita. Gunakannya sebagai alat diagnostik, bukan hakim. Kami mempunyai panduan berasingan tentang membaca laporan Lighthouse tanpa panik yang berguna apabila mengutamakan pembaikan fon.

Langkah 2: Muat turun fail fon yang betul

Google Fonts menawarkan fon sumber terbuka. Anda boleh memuat turunnya daripada laman web Google Fonts atau daripada repositori projek fon yang berkaitan. Semak lesen, tetapi kebanyakan Google Fonts diedarkan di bawah lesen terbuka seperti SIL Open Font License atau Apache License.

Untuk web, utamakan WOFF2. Ia disokong secara meluas oleh pelayar moden dan biasanya jauh lebih kecil daripada TTF atau OTF. Pada 2026, menyajikan TTF terus kepada pelayar jarang wajar untuk laman web awam.

Struktur direktori yang munasabah kelihatan seperti ini:

/public
  /fonts
    inter-latin-400.woff2
    inter-latin-600.woff2
    inter-latin-700.woff2

Gunakan nama fail yang deskriptif. Enam bulan kemudian, font.woff2 akan menyusahkan. inter-latin-600.woff2 membosankan tetapi berguna.

Jika laman anda menggunakan sistem binaan, simpan fon sumber di tempat yang jelas dan biarkan pipeline binaan menyalin fail yang dioptimumkan ke dalam direktori aset awam.

Langkah 3: Subset fon apabila sesuai

Subsetting bermaksud membuang aksara yang tidak anda perlukan. Fon penuh boleh merangkumi Latin, Cyrillic, Greek, Vietnamese, simbol dan banyak ciri OpenType. Jika halaman pendaratan bahasa Inggeris sahaja anda hanya memerlukan aksara Latin, subset boleh menjadi jauh lebih kecil.

Terdapat dua pendekatan biasa:

1. Gunakan subset prabina daripada penyedia fon atau repositori.
2. Jana subset anda sendiri dengan alat fon seperti pyftsubset daripada fonttools.

Bagi banyak pasukan, subset Latin prabina sudah memadai. Subsetting tersuai berguna apabila anda mempunyai halaman yang sangat terhad, seperti satu halaman kempen dengan teks terhad, atau UI produk dengan liputan aksara yang boleh dijangka.

Berhati-hati dengan laman berbilang bahasa. Glif yang hilang menyebabkan pencampuran fon sandaran, yang boleh kelihatan rosak dan menjejaskan kebolehbacaan. Jika anda menyokong berbilang bahasa, petakan subset fon kepada laluan bahasa dan bukannya memaksa satu subset kecil di mana-mana.

Langkah 4: Tulis peraturan @font-face anda

Persediaan setempat minimum kelihatan seperti ini:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

Beberapa butiran penting di sini.

Gunakan font-display: swap untuk kebanyakan laman kandungan. Ia memberitahu pelayar supaya memaparkan teks sandaran dengan cepat, kemudian menukar kepada fon web apabila ia tiba. Itu mengelakkan versi terburuk FOIT: kilatan teks tidak kelihatan.

Tetapkan susunan fon sandaran yang jelas. Jika fon tersuai gagal, pengguna masih patut mendapat teks yang boleh dibaca. Fon sandaran bukan hal yang difikirkan kemudian; ia sebahagian daripada reka bentuk. Jika anda perlu menilai semula saiz, panjang baris dan pilihan teks badan, mulakan dengan panduan praktikal untuk taip yang boleh dibaca di web moden.

Padankan berat dengan betul. Jika CSS anda meminta font-weight: 500 tetapi anda hanya mentakrifkan 400 dan 700, pelayar mungkin mensintesis berat pertengahan. Itu tidak semestinya buruk, tetapi boleh kelihatan tidak konsisten.

Langkah 5: Buang panggilan Google Fonts luaran

Selepas menambah CSS fon setempat, buang panggilan jauh lama daripada templat anda.

Cari:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?..." rel="stylesheet">

Semak juga:

• Tetapan tema dalam platform CMS
• Panel tipografi page-builder
• Widget pihak ketiga
• Tag manager
• Import CSS lama seperti @import url('https://fonts.googleapis.com/...')

Yang terakhir itu biasa berlaku. CSS @import untuk fon biasanya lebih buruk untuk prestasi kerana ia melambatkan penemuan. Jika anda mengehos sendiri, takrifkan fon secara terus dalam CSS utama anda atau fail CSS fon yang dimuatkan awal.

Kerja privasi sering gagal kerana pasukan membaiki templat yang jelas tetapi terlepas skrip, widget dan embed legasi. Corak yang sama muncul dalam kerja persetujuan; panduan kami tentang apa yang berubah untuk kuki pada 2026 ialah rujukan berguna jika anda mengurangkan permukaan pihak ketiga dengan lebih meluas.

Langkah 6: Tetapkan pengepala cache

Fail fon ialah aset statik. Ia patut dicache secara agresif jika nama failnya berversi atau mempunyai hash kandungan.

Pengepala produksi yang baik ialah:

Cache-Control: public, max-age=31536000, immutable

Hanya gunakan caching immutable yang berjangka hayat panjang jika URL berubah apabila fail berubah. Contohnya:

inter-latin-400.a8f3c2.woff2

atau laluan berversi:

/fonts/v2/inter-latin-400.woff2

Jika anda menimpa /fonts/inter-latin-400.woff2 tanpa menukar URL, sesetengah pengguna mungkin menyimpan fail lama untuk masa yang panjang. Itu tidak mengapa sehinggalah ia menjadi masalah. Pemberian versi mengelakkan masalah tersebut.

Sajikan juga fon dengan jenis MIME yang betul:

Content-Type: font/woff2

Kebanyakan platform pengehosan moden mengendalikan perkara ini secara automatik, tetapi ia wajar disahkan.

Langkah 7: Pertimbangkan preload hanya fon kritikal

Preloading boleh membantu pelayar menemui fon penting dengan lebih awal:

<link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin>

Gunakan ini secara berjimat. Preload fon teks utama di atas lipatan, bukan setiap berat fon. Preload berlebihan bersaing dengan CSS, imej dan JavaScript.

Walaupun untuk fon same-origin, sertakan crossorigin pada preload fon. Pengambilan fon menggunakan mod CORS, dan meninggalkannya boleh menyebabkan muat turun berganda dalam sesetengah persediaan.

Jika anda tidak pasti, uji. Jangan ikut-ikutan menambah preload hanya kerana senarai semak menyuruh begitu.

Langkah 8: Uji privasi dan prestasi

Pengujian adalah mudah.

Buka DevTools, muat semula halaman dengan cache dilumpuhkan dan tapis panel Network untuk:

• fonts.googleapis.com
• fonts.gstatic.com
• .woff2
• font

Anda sepatutnya melihat fail fon disajikan daripada domain anda sendiri dan tiada permintaan Google Fonts.

Kemudian uji dengan cache sejuk dan cache panas. Pada lawatan pertama, fon patut dimuat turun sekali. Pada lawatan seterusnya, ia patut datang daripada memori atau cache cakera bergantung pada pelayar.

Semak anjakan reka letak apabila fon ditukar masuk. Jika tajuk melompat, metrik fon sandaran anda terlalu berbeza daripada fon web. Anda boleh mengurangkan anjakan yang kelihatan dengan memilih fon sandaran yang lebih hampir atau menggunakan override metrik fon CSS yang lebih baharu seperti size-adjust, ascent-override, descent-override dan line-gap-override. Ini lebih lanjutan, tetapi berguna untuk antara muka yang digilap.

Akhir sekali, uji halaman dalam pelayaran peribadi atau dengan penyekat kandungan diaktifkan. Salah satu manfaat mengehos sendiri ialah alat privasi kurang berkemungkinan menyekat tipografi anda secara tidak sengaja.

Kesilapan biasa yang perlu dielakkan

Mengehos terlalu banyak berat

Ini kegagalan paling biasa. Dua berat selalunya mencukupi. Tiga biasanya lebih daripada cukup. Lima ialah petanda sistem reka bentuk yang kurang sihat melainkan anda mempunyai sebab yang kukuh.

Melupakan italik

Jika kandungan anda menggunakan penekanan sebenar, muatkan fail italik sebenar. Italik sintetik boleh kelihatan lemah, terutamanya dalam kandungan editorial panjang.

Mengekalkan pautan Google CSS lama

Ini menafikan tujuannya. Selepas migrasi, tiada permintaan fon sepatutnya pergi ke Google melainkan komponen lain menyuntikkannya.

Menyajikan fon tanpa caching jangka panjang

Mengehos sendiri memberi anda kawalan. Gunakannya. Fon ialah calon ideal untuk hayat cache yang panjang.

Mengabaikan kerja perundangan dan dokumentasi

Jika dasar privasi anda sebelum ini menyebut Google Fonts atau pemuatan fon pihak ketiga, kemas kini selepas migrasi. Jika anda mengekalkan inventori pemprosesan data, kemas kini itu juga. Perubahan teknikal dan rekod pematuhan patut selaras.

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

💡 Cuba ini: Tukar fail TTF yang anda muat turun daripada Google Fonts kepada WOFF2 yang boleh dihoskan sendiri serta CSS dengan Webfont Generator.

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

Senarai semak migrasi ringkas

1. Senaraikan keluarga fon, berat, gaya dan skrip yang sebenarnya anda gunakan.
2. Muat turun fail WOFF2 dan sahkan lesen.
3. Subset fon jika laman mempunyai keperluan bahasa yang terhad.
4. Tambah peraturan @font-face setempat dengan font-display: swap.
5. Buang semua rujukan Google Fonts link, preconnect dan @import.
6. Sajikan fon daripada domain anda sendiri dengan pengepala cache berjangka hayat panjang.
7. Preload hanya fon paling penting di atas lipatan, jika pengujian menyokongnya.
8. Sahkan dalam DevTools bahawa tiada permintaan Google Fonts yang tinggal.
9. Kemas kini dokumentasi privasi jika perlu.

Mengehos fon sendiri bukan kerja yang glamor. Ia jenis pembersihan infrastruktur kecil yang mengurangkan risiko kebergantungan, memperbaik kedudukan privasi dan memberi anda pemaparan yang lebih boleh dijangka. Itu biasanya berbaloi dengan satu atau dua jam yang diperlukan.