Desain website yang menarik selalu dimulai dari hal sederhana: pemilihan font yang tepat. Tapi di balik estetika, ada hal penting yang sering dilupakan efisiensi pemakaian font. Terutama ketika menggunakan Google Fonts, yang secara default justru bisa memperlambat loading jika tidak dikelola dengan benar.
Kita semua ingin website yang indah dan cepat. Kabar baiknya, Anda bisa mendapat keduanya. Dalam artikel ini, kita akan bahas cara menggunakan Google Fonts di CMS seperti WordPress dan Joomla secara efisien, tanpa coding dan tanpa memperlambat performa situs.
Google Fonts Bisa Memberatkan Website
Ya, Google Fonts adalah gratis dan mudah digunakan, tapi:
- Setiap font biasanya datang dalam berbagai style (bold, italic, thin, dsb).
- Semakin banyak varian yang dimuat, semakin besar permintaan HTTP.
- Google Fonts di-load dari server eksternal (fonts.googleapis.com) → menambah waktu respons.
Maka, yang harus kita lakukan adalah mengurangi permintaan berlebih, memilih hanya style yang perlu, dan mengoptimasi metode pemanggilannya.
Cara Gunakan Google Fonts Efisien di WordPress
- Gunakan Hanya Style yang Dibutuhkan
Misalnya, jika hanya menggunakan Regular dan Bold, jangan load semua 7 style.
Tools seperti Google Fonts Helper atau plugin WordPress bisa membantu memilih dan generate embed minimalis. - Gunakan Plugin Optimasi Font
- OMGF (Optimize My Google Fonts): mendownload Google Fonts ke server lokal Anda, menghilangkan permintaan eksternal.
- Asset CleanUp: memungkinkan Anda memilih halaman mana yang butuh font tertentu.
- Autoptimize: selain kompresi file, juga punya pengaturan font preload dan async.
- Preload Font di Header
Jika Anda punya kontrol padaheader.php, tambahkan: htmlCopyEdit<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">Tapi jika tak ingin sentuh kode, plugin seperti WP Rocket bisa melakukannya otomatis. - Gunakan Font Display: Swap
Pastikan Anda menggunakan&display=swapsaat memanggil Google Fonts.
Ini memungkinkan teks ditampilkan langsung menggunakan fallback font sebelum Google Font selesai dimuat. Contoh: htmlCopyEdithttps://fonts.googleapis.com/css2?family=Roboto&display=swap
Cara Gunakan Google Fonts Efisien di Joomla
- Gunakan Template Framework Modern
Beberapa template seperti Helix Ultimate atau Astroid sudah menyediakan pengaturan pemilihan Google Fonts langsung dari panel admin. - Hapus Font Tak Digunakan
Jika Anda pakai lebih dari satu font atau varian, pastikan hanya memilih satu atau dua gaya. - Gunakan Ekstensi Optimasi
- JCH Optimize juga bisa menggabungkan file CSS dan mengelola font load secara efisien.
- Anda juga bisa menginstal plugin eksternal untuk preload atau load lokal.
- Local Hosting Google Fonts (Advanced)
Untuk Joomla, Anda bisa mengunduh Google Fonts dan host di server sendiri.
Cara ini butuh sedikit teknis, tapi bisa dilakukan dengan ekstensi tambahan atau file override CSS.
Kombinasikan dengan System Fonts
Cobalah pendekatan hybrid:
- Gunakan system font stack (Arial, Helvetica, Segoe UI) untuk elemen minor.
- Simpan Google Fonts hanya untuk heading atau elemen utama.
Dengan begitu, Anda tetap menjaga karakter brand lewat tipografi, tanpa harus mengorbankan kecepatan.
Kesimpulan
Menggunakan Google Fonts dengan efisien bukan tentang mengurangi estetika, tapi menjaga keseimbangan antara desain dan performa. Dalam CMS seperti WordPress dan Joomla, ada banyak cara untuk tetap tampil profesional tanpa membebani kecepatan.
Dan ingat, user tidak selalu menyadari font yang bagus… tapi mereka pasti merasakan website yang lambat.Bersama Webklik, kami tidak hanya membangun website yang terlihat keren, tapi juga performa tinggi di baliknya.
