Cara Menambahkan Custom Font di WordPress

Apakah kamu ingin menambahkan custom font di WordPress? dengan menggunakan font khusus memungkinkan kamu untuk menata situs dengan berbagai tipografi sehingga dapat meningkatkan mengalaman pengguna.

Selain terlihat bagus, font khusus juga dapat meningkatkan keterbacaan, menciptakan merek, dan juga dapat meningkatkan waktu baca oleh pengguna di website kamu.

Pada artikel ini, kami akan menunjukkan cara menambahkan custom font di WordPress menggunakan metode Google Font, TypeKit, dan CSS3 @Font-Face.

Tapi perlu kamu ketahui, jika terlalu banyak memuat font, itu bisa memperlambat loading website. Sehingga kami menyarankan kamu untuk memilih setidaknya dua font dan menggunakannya di seluruh website. Kami juga akan menunjukkan cara memuatnya dengan benar tanpa memperlambat situs.

Cara Menemukan Custom Font untuk Digunakan di WordPress

Dulunya font memiliki harga yang cukup mahal, namun tidak lagi. Sekarang sudah banyak website atau tempat yang dapat kamu manfaatkan untuk menemukan font web gratis yang bagus seperti Google Font, Typekit, FontSquirrel, dan fonts.com.

Saat kamu memilih font, ingatlah bahwa terlalu banyak menggunakan font custom akan memperlambat situs. Inilah sebabnya mengapa kamu harus memilih setidaknya dua font dan menggunakannya di seluruh desain situs kamu.

Cara Menambahkan Custom Font di WordPress dari Google Font

Google font adalah font library terbesar, gratis, dan paling umum digunakan oleh para pengembang website. Ada beberapa cara yang dapat kamu gunakan untuk menambahkan dan menggunakan Google Font di WordPress.

Metode 1. Menambahkan Custom Font Menggunakan Plugin Easy Google Fonts

Jika kamu ingin menambahkan dan menggunakan Google Font di website, maka metode ini adalah yang termudah dan paling kami rekomendasikan.

Hal pertama yang perlu kamu lakukan adalah menginstal dan mengaktifkan plugin Easy Google Fonts. Untuk detail lebih lanjut, kamu dapat melihat panduan kami sebelumnya tentang cara memasang plugin WordPress.

Setelah aktivasi, kamu dapat membuka halaman Appearance > Customizer. Ini akan membuka antarmuka penyesuaian tema langsung, dimana kamu akan melihat menu “Typography” baru di panel sebelah kiri.

Dengan mengklik Typography akan menampilkan berbagai bagian website dimana kamu dapat menerapkan Google Font. Selanjutnya kamu bisa mengklik pada bagian yang ingin kamu rubah tampilan tipografinya.

Di bagian bawah font family, kamu dapat memilih Google Font yang ingin kamu gunakan pada website. Kamu bahkan bisa memilih gaya font, ukuran font, padding, margin, dan lainnya.

Tetapi tergantung dari tema yang kamu gunakan, jumlah bagian disini dapat dibatasi dan kamu mungkin tidak dapat secara langsung mengubah pemilihan font untuk berbagai area pada website.

Untuk memperbaikinya, plugin ini juga memungkinkan kamu membuat kontrol sendiri dan menggunakannya untuk mengubah font di website kamu.

Pertama, kamu dapat mengunjungi halaman Settings > Easy Google Font dan berikan nama untuk kontrol font. Gunakan sesuatu yang membantu kamu mamahami dengan cepat dimana kamu akan menggunakan kontrol font ini.

Kamu juga bisa memasukkan CSS Selectors setelah memasukkan nama kontrol font. Misalnya saja dengan menambahkan elemen HTML yang kamu targetkan seperti h1, h2, h3, h4, p, blockquote atau menggunakan class CSS.

Kamu dapat memanfaatkan tool inspect bawaan browser untuk mengetahui class CSS mana yang digunakan oleh area tertentu yang ingin kamu ubah.

Setelah selesai jangan lupa mengklik tombol Crate Font Control. Perlu di ketahui, kamu bisa membuat pengontrol font sebanyak yang kamu butuhkan untuk berbagai bagian website.

Untuk menggunakan pengontrol font ini, kamu harus membuka Appearance > Customizer dan klik pada tab Typography.

Seperti yang terlihat, di bawah Default Typography kamu akan melihat opsi baru yang bernama “Theme Typography”. Dengan mengkliknya, itu akan menampilkan custom kontrol font yang sudah kamu buat sebelumnya. Kamu sekarang dapat mengklik kontrol font “Heading” dan membuat perubahan.

Jika dirasa sudah selesai, jangan lupa mengklik tombol Publish untuk penyimpan perubahan yang sudah kamu buat.

Metode 2. Tambahkan Google Font Secara Manual di WordPress

Metode ini mengharuskan kamu untuk menambahkan kode ke file tema WordPress.

Pertama, kamu harus mengunjungi Google Font Library dan pilih font yang kamu inginkan. Selanjutnya, klik tombol penggunaan cepat yang berada di samping font.

Pada halaman font, kamu akan melihat gaya yang tersedia untuk font tersebut. Pilih gaya yang ingin kamu gunakan dalam projek, lalu klik tombol sidebar di bagian atas.

Selanjutnya kamu dapat menyalin cuplikan kode yang muncul di bagian “Use on the web”.

Dan untuk menambahkan kode tersebut ke situs WordPress kamu dapat menggunakan dua cara. Pertama, kamu cukup mengedit file header.php tema dan menempelkan kode sebelum tag <body>.

Namun, jika kamu tidak terbiasa melakukan pengeditkan kode pada situs, kamu dapat menggunakan plugin khusus untuk menambahkan kode ini.

Cukup instal dan aktifkan plugin Insert Headers and Footers. Untuk detail lebih lanjut, lihat panduan kami tentang cara memasang plugin WordPress.

Setelah aktivasi, buka halaman Settings > Insert Headers and Footers dan tempelkan kode yang sudah kamu salin sebelumnya ke dalam kolom Scripts in Header.

Jika sudah selesai, klik tombol Save di bagian bawah untuk menyimpan perubahan. Plugin sekarang akan mulai memuat kode Google Font yang sudah kamu tempelkan di semua halaman website.

Kamu bisa menggunakan font ini di stylesheet tema seperti berikut:

Menambahkan Custom Font di WordPress Menggunakan Typekit

Typekit oleh Adobe Fonts adalah sumber gratis dan premium lainnya, banyak font mengagumkan yang dapat kamu gunakan dalam projek desain. Mereka memiliki paket berbayar serta paket gratis terbatas yang dapat kamu pilih.

Cukup dengan mendaftar akun Adobe Fonts dan kunjungi halaman pencarian font. Setelah menemukan font yang kamu inginkan, disini kamu perlu mengklik tombol </> untuk memilih font tersebut dan membuat projek baru.

Setelah itu akan muncul window yang meminta kamu untuk memberi nama projek baru yang kamu buat, disini kamu bisa memberi nama apa pun, jika sudah klik tombol Create.

Kemudian kamu akan melihat kode sematan dengan ID projek. Ini juga akan menunjukkan cara menggunakan font di CSS tema.

Kamu hanya perlu menyalin dan menempelkan kode tersebut di dalam tag <head> website.

Sekarang ada dua cara yang dapat kamu gunakan untuk menambahkan kode ini ke situs WordPress.

Pertama, kamu cukup mengedit file header.php tema dan menempelkannya sebelum tag <body>.

Namun, jika belum terbiasa dengan pengeditan kode di WordPress, kamu dapat menggunakan bantuan plugin khusus untuk melakukannya.

Sama seperti sebelumnya, kami akan menggunakan plugin Insert Headers and Footers.

Cukup tempelkan kode yang kamu salin sebelumnya pada kolom Scripts in Header.

Itu saja, sekarang kamu dapat menggunakan font TypeKit yang kamu pilih di stylesheet tema WordPress seperti ini:

Menambahkan Custom Font di WordPress Menggunakan CSS3 @font-face

Cara yang paling cepat menambahkan custom font di WordPress adalah dengan menggunakan @font-face metode CSS3. Metode ini memungkinkan kamu untuk menggunakan font apa pun yang kamu sukai di website.

Hal pertama yang perlu kamu lakukan adalah mengunduh font yang kamu sukai dalam format web. Jika kamu tidak memiliki format web untuk font, maka kamu dapat mengonversinya menggunakan FontSquirrel Webfont generator.

Setelah memiliki webfont, kamu harus mengunggahnya ke server hosting WordPress kamu.

Kami merekomendasikan untuk mengunggahnya di dalam folder font baru pada direktori tema atau child theme.

Agar dapat mengunggah font tersebut pada direktori root website, kamu bisa menggunakan klien FTP atau melalui file manager di cPanel.

Setelah selesai mengunggah font, kamu perlu memuat font di stylesheet tema menggunakan aturan CSS3 @font-face seperti ini.

Jangan lupa untuk mengganti font-family dan URL sesuai dengan yang kamu miliki.

Setelah itu, kamu dapat menggunakan font tersebut dimana saja pada stylesheet tema seperti ini.

Memuat font secara langsung menggunakan CSS3 @font-face tidak selalu menjadi solusi terbaik. Jika kamu menggunakan font dari Google Fonts atau TypeKit, maka yang terbaik adalah menyajikan font langsung dari server mereka untuk kinerja yang optimal.

Itu saja, kami harap artikel ini membantu kamu menambahkan custom font di WordPress.

Semoga panduan di atas bermanfaat. Jika kamu memiliki pertanyaan tinggalkan pada kolom komentar di bawah.