Ganti Font Website WordPress Anda Tanpa Plugin: Cara Praktis yang Juga Meringankan Beban Hosting

Font atau jenis huruf adalah identitas visual pertama yang dirasakan pembaca saat membuka sebuah website, bahkan sebelum mereka sempat membaca satu kalimat pun. Font yang tepat memancarkan kesan profesional, mudah dibaca, dan berkesan. Font yang salah membuat pengunjung mengira website Anda dibuat asal-asalan.

Banyak pengelola website WordPress di Indonesia yang menginginkan tampilan huruf yang berbeda dari bawaan tema, namun langsung memasang plugin font tambahan saat melihat solusi tersebut di forum online. Plugin tambahan memang memudahkan, namun setiap plugin yang aktif menambah beban eksekusi PHP dan permintaan basis data pada setiap pemuatan halaman. Dalam jangka panjang, ini berkontribusi pada lambatnya website, terutama di server shared hosting cPanel paket murah yang sangat sensitif terhadap penggunaan sumber daya berlebih.

Kabar baiknya, mengganti font di WordPress sepenuhnya bisa dilakukan tanpa satu pun plugin tambahan. Artikel ini memandu Anda dengan dua pendekatan paling andal: menggunakan Google Fonts secara ringan dan cara memasang font kustom dari berkas lokal di server Anda sendiri.

Mengapa Hindari Plugin Font Tambahan?

Sebelum melanjutkan ke langkah teknis, penting untuk memahami mengapa cara manual lebih disarankan untuk website dengan target performa tinggi.

Plugin font pihak ketiga yang populer di repositori WordPress biasanya bekerja dengan cara melakukan permintaan eksternal ke Google Fonts API setiap kali halaman dimuat. Setiap permintaan DNS tambahan memperpanjang antrian komunikasi browser dengan peladen jauh. Untuk pengunjung yang mengakses website dari koneksi internet mobile provider Indonesia di daerah dengan sinyal berfluktuasi, setiap milidetik penundaan terasa nyata.

Selain itu, per Januari 2023, lembaga perlindungan data Jerman telah mengeluarkan keputusan yang menyatakan bahwa permintaan font langsung ke server Google, yang secara otomatis mentransmisikan alamat IP pengunjung ke Google, dapat melanggar regulasi privasi GDPR. Menyimpan berkas font langsung di peladen Anda sendiri menghilangkan risiko kepatuhan hukum ini sepenuhnya.

Metode 1: Muat Google Fonts Secara Ringan lewat Kode PHP (Tanpa Plugin)

Metode ini sangat disarankan bagi Anda yang ingin menggunakan font populer dari katalog Google Fonts dengan tetap menjaga kode tema rapi dan mudah dikelola.

Langkah 1: Pilih font di Google Fonts

Kunjungi fonts.google.com dan pilih font yang sesuai dengan karakter website Anda. Sebagai contoh, font Lato sangat populer untuk website bisnis karena kesan bersih dan profesionalnya.

Langkah 2: Ambil URL CSS langsung dari Google Fonts

Klik tombol Get Embed Code pada halaman font pilihan Anda. Dari kode yang muncul, salin bagian URL yang mirip seperti ini:

https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap

Langkah 3: Daftarkan font ke antrian WordPress melalui functions.php

Buka tema aktif Anda via wp-admin > Appearance > Theme File Editor, atau gunakan File Manager cPanel lalu navigasikan ke folder wp-content/themes/nama-tema-anda/. Buka berkas functions.php, lalu tambahkan fungsi ini persis sebelum tag penutup ?> jika ada, atau di bagian bawah berkas:

function antond_muat_google_font() {
    wp_enqueue_style(
        'custom-font-lato',
        'https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap',
        array(),
        null
    );
}
add_action( 'wp_enqueue_scripts', 'antond_muat_google_font' );

Langkah 4: Terapkan font di CSS tema Anda

Buka berkas style.css tema Anda dan tambahkan deklarasi font-family pada elemen yang ingin diubah:

body, p, li {
    font-family: 'Lato', sans-serif;
}
h1, h2, h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
}

Simpan perubahan, bersihkan cache plugin caching Anda (misalnya LiteSpeed Cache atau WP Rocket), lalu refresh halaman untuk melihat hasilnya.

Metode 2: Hosting Font Sendiri di Peladen (Performa Maksimal)

Metode ini memberikan performa terbaik karena browser pengunjung mengunduh berkas font langsung dari peladen Anda, bukan dari peladen pihak ketiga. Tidak ada DNS lookup tambahan, tidak ada latensi lintas benua.

Langkah 1: Unduh berkas font dalam format woff2

Kunjungi fonts.google.com, pilih font pilihan Anda, lalu klik ikon unduh di sudut kanan atas. Anda akan mendapatkan arsip ZIP berisi berkas berekstensi .ttf. Untuk performa optimal di website modern, Anda perlu mengubah format tersebut ke woff2. Gunakan layanan konversi online seperti Transfonter (transfonter.org) atau CloudConvert untuk menghasilkan berkas .woff2 dari .ttf Anda.

Langkah 2: Unggah ke folder tema

Buat folder baru bernama fonts di dalam direktori tema Anda. Unggah berkas .woff2 ke sana melalui cPanel File Manager atau aplikasi FTP. Struktur folder yang dihasilkan akan terlihat seperti ini:

wp-content/themes/nama-tema-anda/fonts/lato-regular.woff2
wp-content/themes/nama-tema-anda/fonts/lato-bold.woff2

Langkah 3: Deklarasikan font dengan aturan @font-face di style.css

Buka berkas style.css tema Anda dan tambahkan blok deklarasi berikut di bagian paling atas berkas, sebelum aturan CSS lainnya:

@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lato';
    src: url('fonts/lato-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

Perhatikan deklarasi font-display: swap. Properti ini memastikan browser menampilkan font cadangan sistem terlebih dahulu sementara berkas font kustom masih dalam proses unduhan, sehingga pengunjung tidak melihat teks yang hilang atau berkedip.

Langkah 4: Terapkan font-family di elemen CSS

Sama seperti metode sebelumnya, tambahkan font-family: 'Lato', sans-serif; pada elemen body dan heading pilihan Anda.

Tips Tambahan: Gunakan Preconnect untuk Google Fonts

Jika Anda memilih Metode 1 yang tetap memuat font dari server Google, tambahkan instruksi preconnect di bagian header untuk memberi tahu browser agar mempersiapkan koneksi jaringan ke peladen Google lebih awal. Tambahkan baris berikut ke fungsi PHP yang sama di functions.php:

function antond_preconnect_google_fonts() {
    echo '<link rel="preconnect" href="https://fonts.googleapis.com">';
    echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
}
add_action( 'wp_head', 'antond_preconnect_google_fonts', 1 );

Trik kecil ini bisa menghemat puluhan hingga ratusan milidetik pada pemuatan pertama halaman, terutama untuk pengunjung dari koneksi seluler di kota-kota dengan latensi tinggi seperti area pedesaan Jawa dan luar Jawa.

Mengganti font di WordPress sejatinya tidak sulit dan tidak membutuhkan plugin tambahan. Dengan beberapa baris kode PHP dan CSS yang sudah teruji, Anda mendapatkan tampilan font yang lebih personal, kecepatan halaman yang lebih baik, dan satu plugin yang lebih sedikit berpotensi menjadi titik kerentanan keamanan di kemudian hari.