Cara menghosting font secara lokal alih-alih menggunakan Google Fonts

Mengapa melakukan self-host Google Fonts?

Google Fonts membuat tipografi yang baik menjadi mudah. Tambahkan stylesheet, pilih beberapa weight, lalu kirim halaman. Selama bertahun-tahun, itu menjadi pilihan default yang masuk akal bagi tim kecil.

Komprominya adalah browser setiap pengunjung menghubungi layanan pihak ketiga untuk mengambil CSS font dan file font. Itu memiliki dua konsekuensi.

Pertama, hal ini menambahkan dependensi eksternal pada proses rendering. Jika CSS font lambat, diblokir, atau tidak tersedia di wilayah atau jaringan pengguna, halaman Anda akan menunggu atau menggunakan fallback.

Kedua, hal ini menimbulkan pertanyaan privasi. Permintaan font dapat mengungkap alamat IP pengguna, user agent, konteks referrer policy, dan informasi waktu kepada pihak ketiga. Google Fonts menyatakan bahwa layanan ini tidak menetapkan cookie melalui Fonts API, tetapi “tanpa cookie” tidak sama dengan “tanpa data pribadi.” Di bawah GDPR, alamat IP tetap dapat menjadi data pribadi dalam konteks tertentu.

Self-hosting font tidak otomatis wajib untuk setiap website, dan ini bukan nasihat hukum. Namun untuk situs Eropa, situs sektor publik, layanan kesehatan, pendidikan, keuangan, atau tim mana pun yang ingin mengurangi permintaan pihak ketiga yang tidak perlu, hosting lokal biasanya menjadi pilihan yang lebih bersih.

Ini juga sering menjadi kemenangan performa jika dilakukan dengan baik. Tantangannya ada pada “dilakukan dengan baik.” Menyalin enam file font ke /assets/fonts/ dan memuat semuanya di setiap halaman bisa lebih buruk daripada menggunakan layanan hosted. Jika Anda menginginkan konteks performa yang lebih luas, artikel kami sebelumnya tentang mengapa web font masih menjadi kemenangan performa termudah di sebagian besar situs membahas pola pemborosan yang umum.

Apa yang berubah saat Anda melakukan self-host

Saat 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">

Browser pertama-tama meminta CSS dari fonts.googleapis.com, lalu mengunduh file font dari fonts.gstatic.com.

Saat Anda melakukan self-host, halaman Anda sebaiknya meminta CSS dan file font dari 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 menghapus permintaan font pihak ketiga. Ini juga membuat Anda bertanggung jawab untuk memilih format file, cache headers, font fallback, dan pembaruan.

Tanggung jawab itu layak ditangani dengan serius. Font berada di jalur rendering kritis. Penyiapan font yang buruk dapat menyebabkan teks tidak terlihat, layout shift, dan render awal yang lambat.

Langkah 1: Audit apa yang benar-benar Anda gunakan

Sebelum mengunduh apa pun, daftarkan font family, weight, style, dan set karakter yang benar-benar dibutuhkan situs Anda.

Situs marketing yang umum mungkin membutuhkan:

• Regular 400 untuk teks body
• Semibold 600 atau bold 700 untuk heading dan tombol
• Italic 400 hanya jika desain benar-benar menggunakan italic
• Set karakter Latin saja, kecuali situs mendukung lebih banyak bahasa

Waspadai default design system lama. Banyak situs memuat 300, 400, 500, 600, 700, italic, dan beberapa script karena seseorang pernah memilihnya di font picker.

Di browser DevTools, buka panel Network, filter dengan “font,” muat ulang halaman, dan periksa file mana yang diminta. Lalu inspeksi CSS Anda untuk penggunaan font-weight. Jika CSS Anda tidak pernah menggunakan 300, jangan host 300.

Jika nanti Anda meninjau dampaknya, Lighthouse dapat membantu, tetapi jangan perlakukan skornya sebagai keseluruhan cerita. Gunakan sebagai alat diagnostik, bukan hakim. Kami memiliki panduan terpisah tentang membaca laporan Lighthouse tanpa panik yang berguna saat memprioritaskan perbaikan font.

Langkah 2: Unduh file font yang tepat

Google Fonts menawarkan font open-source. Anda dapat mengunduhnya dari website Google Fonts atau dari repository proyek font terkait. Periksa lisensinya, tetapi sebagian besar Google Fonts didistribusikan di bawah lisensi terbuka seperti SIL Open Font License atau Apache License.

Untuk web, pilih WOFF2. Format ini didukung luas oleh browser modern dan biasanya jauh lebih kecil daripada TTF atau OTF. Pada 2026, menyajikan TTF langsung ke browser jarang dapat dibenarkan untuk website publik.

Struktur direktori yang masuk akal terlihat seperti ini:

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

Gunakan nama file yang deskriptif. Enam bulan kemudian, font.woff2 akan terasa menyebalkan. inter-latin-600.woff2 terdengar membosankan tetapi berguna.

Jika situs Anda menggunakan build system, simpan font sumber di tempat yang jelas dan biarkan build pipeline menyalin file yang sudah dioptimalkan ke direktori aset publik.

Langkah 3: Lakukan subset font jika sesuai

Subsetting berarti menghapus karakter yang tidak Anda perlukan. Font lengkap dapat mencakup Latin, Cyrillic, Greek, Vietnamese, simbol, dan banyak fitur OpenType. Jika landing page berbahasa Inggris Anda hanya membutuhkan karakter Latin, subset dapat jauh lebih kecil.

Ada dua pendekatan umum:

1. Gunakan subset siap pakai dari penyedia font atau repository.
2. Buat subset sendiri dengan alat font seperti pyftsubset dari fonttools.

Bagi banyak tim, subset Latin siap pakai sudah cukup. Subsetting kustom berguna saat Anda memiliki halaman yang sangat terbatas, seperti satu halaman kampanye dengan teks terbatas, atau UI produk dengan cakupan karakter yang dapat diprediksi.

Berhati-hatilah dengan situs multibahasa. Glyph yang hilang menyebabkan campuran font fallback, yang dapat terlihat rusak dan mengganggu keterbacaan. Jika Anda mendukung beberapa bahasa, petakan subset font ke route bahasa, bukan memaksa satu subset kecil di mana-mana.

Langkah 4: Tulis aturan @font-face Anda

Penyiapan lokal minimal terlihat 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;
}

Ada beberapa detail yang penting di sini.

Gunakan font-display: swap untuk sebagian besar situs konten. Ini memberi tahu browser untuk menampilkan teks fallback dengan cepat, lalu menukar ke web font saat tiba. Itu menghindari versi terburuk dari FOIT: flash of invisible text.

Tetapkan fallback stack yang eksplisit. Jika font kustom gagal, pengguna tetap harus mendapatkan teks yang mudah dibaca. Fallback bukan renungan; fallback adalah bagian dari desain. Jika Anda perlu meninjau kembali sizing, panjang baris, dan pilihan teks body, mulai dengan panduan praktis untuk tipografi yang mudah dibaca di web modern.

Cocokkan weight dengan benar. Jika CSS Anda meminta font-weight: 500 tetapi Anda hanya mendefinisikan 400 dan 700, browser mungkin mensintesis weight menengah. Itu tidak selalu buruk, tetapi bisa terlihat tidak konsisten.

Langkah 5: Hapus panggilan Google Fonts eksternal

Setelah menambahkan CSS font lokal, hapus panggilan remote lama dari template 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">

Periksa juga:

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

Yang terakhir itu umum. CSS @import untuk font biasanya lebih buruk untuk performa karena menunda penemuan. Jika Anda melakukan self-host, definisikan font langsung di CSS utama atau file CSS font yang dimuat lebih awal.

Pekerjaan privasi sering gagal karena tim memperbaiki template yang jelas terlihat tetapi melewatkan script, widget, dan embed lama. Pola yang sama muncul dalam pekerjaan consent; panduan kami tentang apa yang berubah untuk cookie pada 2026 adalah pendamping yang berguna jika Anda mengurangi permukaan pihak ketiga secara lebih luas.

Langkah 6: Tetapkan cache headers

File font adalah aset statis. File tersebut sebaiknya di-cache secara agresif jika nama filenya diberi versi atau content-hash.

Header produksi yang baik adalah:

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

Gunakan caching immutable jangka panjang hanya jika URL berubah saat file berubah. Misalnya:

inter-latin-400.a8f3c2.woff2

atau path berversi:

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

Jika Anda menimpa /fonts/inter-latin-400.woff2 tanpa mengubah URL, sebagian pengguna mungkin menyimpan file lama untuk waktu yang lama. Itu tidak masalah sampai akhirnya menjadi masalah. Versioning menghindari masalah tersebut.

Sajikan juga font dengan MIME type yang benar:

Content-Type: font/woff2

Sebagian besar platform hosting modern menangani ini secara otomatis, tetapi tetap layak diverifikasi.

Langkah 7: Pertimbangkan preload hanya untuk font kritis

Preloading dapat membantu browser menemukan font penting lebih awal:

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

Gunakan ini secukupnya. Preload font teks utama di bagian atas layar, bukan setiap font weight. Preload berlebihan bersaing dengan CSS, gambar, dan JavaScript.

Bahkan untuk font same-origin, sertakan crossorigin pada preload font. Pengambilan font menggunakan mode CORS, dan menghilangkannya dapat menyebabkan unduhan duplikat di beberapa penyiapan.

Jika Anda tidak yakin, uji. Jangan meniru preload secara membabi buta hanya karena checklist menyarankannya.

Langkah 8: Uji privasi dan performa

Pengujiannya cukup langsung.

Buka DevTools, muat ulang halaman dengan cache dinonaktifkan, dan filter panel Network untuk:

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

Anda seharusnya melihat file font disajikan dari domain Anda sendiri dan tidak ada permintaan Google Fonts.

Lalu uji dengan cache dingin dan cache hangat. Pada kunjungan pertama, font sebaiknya diunduh sekali. Pada kunjungan berikutnya, font sebaiknya berasal dari memory atau disk cache, tergantung browser.

Periksa layout shift saat font ditukar masuk. Jika heading melompat, metrik font fallback Anda terlalu berbeda dari web font. Anda dapat mengurangi pergeseran yang terlihat dengan memilih fallback yang lebih dekat atau menggunakan override metrik font CSS yang lebih baru seperti size-adjust, ascent-override, descent-override, dan line-gap-override. Ini lebih lanjutan, tetapi berguna untuk antarmuka yang rapi.

Terakhir, uji halaman dalam private browsing atau dengan content blocker aktif. Salah satu manfaat self-hosting adalah alat privasi lebih kecil kemungkinannya memblokir tipografi Anda secara tidak sengaja.

Kesalahan umum yang perlu dihindari

Menghosting terlalu banyak weight

Ini kegagalan paling umum. Dua weight sering kali cukup. Tiga biasanya sudah banyak. Lima adalah tanda mencurigakan dalam design system kecuali Anda memiliki alasan kuat.

Melupakan italic

Jika konten Anda menggunakan penekanan nyata, muat file italic yang sebenarnya. Italic sintetis dapat terlihat buruk, terutama dalam konten editorial panjang.

Membiarkan link CSS Google lama

Ini menggagalkan tujuannya. Setelah migrasi, tidak ada permintaan font yang boleh menuju Google kecuali komponen lain menyisipkannya.

Menyajikan font tanpa caching jangka panjang

Self-hosting memberi Anda kendali. Gunakan. Font adalah kandidat ideal untuk masa cache yang panjang.

Mengabaikan pekerjaan hukum dan dokumentasi

Jika kebijakan privasi Anda sebelumnya menyebut Google Fonts atau pemuatan font pihak ketiga, perbarui setelah migrasi. Jika Anda memelihara inventaris pemrosesan data, perbarui juga. Perubahan teknis dan catatan kepatuhan harus selaras.

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

💡 Coba ini: Konversi file TTF yang Anda unduh dari Google Fonts menjadi WOFF2 yang dapat di-host sendiri plus CSS dengan Webfont Generator.

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

Checklist migrasi sederhana

1. Daftarkan font family, weight, style, dan script yang benar-benar Anda gunakan.
2. Unduh file WOFF2 dan konfirmasi lisensinya.
3. Lakukan subset font jika situs memiliki kebutuhan bahasa yang terbatas.
4. Tambahkan aturan @font-face lokal dengan font-display: swap.
5. Hapus semua referensi Google Fonts link, preconnect, dan @import.
6. Sajikan font dari domain Anda sendiri dengan cache headers jangka panjang.
7. Preload hanya font bagian atas layar yang paling penting, jika pengujian mendukungnya.
8. Verifikasi di DevTools bahwa tidak ada permintaan Google Fonts yang tersisa.
9. Perbarui dokumentasi privasi jika diperlukan.

Self-hosting font bukan pekerjaan yang glamor. Ini adalah jenis pembersihan infrastruktur kecil yang mengurangi risiko dependensi, meningkatkan postur privasi, dan memberi Anda rendering yang lebih dapat diprediksi. Biasanya itu sepadan dengan satu atau dua jam yang dibutuhkan.