Cara Menambahkan Font Kustom di WordPress dengan Elementor

Fielita
2 March, 2026

Cara menambahkan font kustom di WordPress dengan Elementor menjadi solusi terbaik bagi pemilik website yang ingin meningkatkan tampilan visual tanpa harus memahami kode pemrograman.

Font kustom tidak hanya berfungsi sebagai elemen estetika, tetapi juga mampu memperkuat identitas brand dan meningkatkan pengalaman pengguna (user experience).

Dengan bantuan Elementor, proses penambahan font menjadi lebih cepat, praktis, dan ramah bagi pemula.

Pada artikel ini, Anda akan mempelajari langkah-langkah lengkap mulai dari menyiapkan file font, mengonversi format font, hingga menggunakannya langsung di halaman WordPress menggunakan Elementor.

Apa Itu Font Kustom di WordPress?

Font kustom adalah jenis huruf yang tidak tersedia secara default di WordPress maupun tema yang digunakan. Biasanya, WordPress hanya menyediakan font standar seperti Arial atau Times New Roman. Dengan menggunakan font kustom, tampilan website akan terlihat lebih profesional dan unik.

Elementor menyediakan fitur Custom Fonts yang memungkinkan pengguna menambahkan font sendiri tanpa plugin tambahan atau pengaturan manual melalui CSS.

Cara Menambahkan Font Kustom di WordPress dengan Elementor

1. Menyiapkan File Font Kustom

Langkah pertama dalam menambahkan font kustom di WordPress adalah menyiapkan file font. Anda bisa mengunduh font gratis dari situs terpercaya seperti:

Biasanya font yang diunduh berformat TTF atau OTF dan masih dikompresi dalam file ZIP. Ekstrak file tersebut sebelum digunakan.

2. Konversi Font ke Format yang Didukung Elementor

Elementor membutuhkan beberapa format font agar kompatibel di semua browser, yaitu:

  • WOFF
  • WOFF2
  • TTF
  • SVG
  • EOT

Untuk mengonversi font, gunakan layanan gratis seperti:CloudConvert

Unggah file TTF, lalu konversikan ke semua format yang dibutuhkan. Setelah selesai, unduh seluruh file hasil konversi.

3. Upload Font Kustom di Elementor

Setelah semua file font siap, ikuti langkah berikut:

  1. Masuk ke Dashboard WordPress
  2. Pilih menu Elementor → Custom Fonts
  3. Klik Add New
  4. Masukkan nama font
  5. Klik Add Font Variation
  6. Unggah semua format font
  7. Klik Publish

Font kustom kini sudah tersimpan dan siap digunakan.

Cara Menggunakan Font Kustom di Elementor

Mengatur Font Kustom pada Heading dan Teks Untuk menggunakan font:

  1. Buka halaman yang ingin diedit
  2. Klik Edit with Elementor
  3. Pilih teks atau heading
  4. Masuk ke tab Style → Typography
  5. Pada Font Family, ketik nama font kustom
  6. Simpan perubahan

Font akan langsung diterapkan pada elemen tersebut.

Masalah Umum Saat Menambahkan Font Kustom di WordPress

Salah satu kendala yang sering muncul saat menambahkan font kustom di WordPress dengan Elementor adalah font tidak tampil setelah di-update. Hal ini biasanya disebabkan oleh cache browser atau cache plugin. Solusinya:

  • Bersihkan cache website
  • Buka website menggunakan mode incognito
  • Refresh halaman

Optimasi SEO dengan Font Kustom

Selain meningkatkan tampilan, penggunaan font yang tepat juga membantu:

  • Meningkatkan readability
  • Menurunkan bounce rate
  • Meningkatkan durasi kunjungan

Jika Anda ingin mempelajari strategi optimasi website lainnya secara lebih mendalam, silakan baca artikel berikut : Panduan Lengkap SEO Lokal : Strategi Jitu Menjangkau Pelanggan di Sekitar Anda

Kesimpulan

Cara menambahkan font kustom di WordPress dengan Elementor terbukti menjadi solusi paling praktis bagi pemula maupun profesional. Tanpa perlu coding, Anda bisa mengunggah font sendiri, mengatur tampilan website, dan meningkatkan kualitas desain secara signifikan.

Dengan mengikuti langkah-langkah di atas dan menerapkan optimasi SEO yang tepat, website Anda tidak hanya tampil menarik tetapi juga memiliki peluang lebih besar untuk bersaing di mesin pencari.

Sumber Photo : Markus Spiske on Unsplash

Baca Juga : Ini Cara Mudah Menggunakan Custom Font di WordPress Profesional

chevron-down linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram