Tutorial kali ini akan membahas bagaimana cara merubah google font menjadi lokal font di elementor, tujuan dari cara merubah google font menjadi lokal font di elementor ini adalah agar loading halaman menjadi lebih cepat, karena seperti yang kita ketahui, elementor merupakan plugin page builder yang memiliki banyak fitur yang memudahkan kita dalam membuat atau mendesign halaman menjadi lebih mudah.
Namun, tak dipungkiri bahwa menggunakan elementor dalam mendesign halaman dapat membuat loading speed menjadi lebih lambat. Pengunaan Google Font umumnya menggunakan javascript yang di embed pada <head> pada source code website, artinya ketika website dibuka, website melakukan request dan meload font dari google font library tersebut setiap kali.
Salah satu cara adalah dengan mengurangi jumlah request ke google font library, yaitu dengan merubah Google Font menjadi lokal font, sehingga tidak lagi ada request ke link luar yaitu server google font library tadi.
Untuk dapat merubah google font menjadi lokal font di elementor, sayang nya kita harus menggunakan Elementor Pro, karena fitur ini tidak ditemukan pada Elementor free atau yang versi gratisnya.
Berikut Cara Merubah Google Font Menjadi Lokal Font di Elementor
Dengan merubah google font menjadi lokal font di elementor, akan membuat loading website dan halaman menjadi lebih cepat karena kita tidak lagi melakukan request ke google font library berulang kali saat website atau halaman di buka.
Lama Pengerjaan: 15 minutes
1. Download Google Font
Langkah pertama adalah dengan mendownload font yang ingin digunakan di Google Font Library, kamu bisa menggunakan Google Font Helper pada link dibawah ini
Google Font Helper ini berada di server Heroku, dengan google font helper kita dapat mendownload semua tipe dan jenis font yang ada pada Google Font Library. Kamu hanya perlu mengetikan nama font yang akan di gunakan, sebagai contoh disini saya menggunakan font bernama “poppins”
2. Pilih Style atau Ukuran Font
Setelah menemukan font yang diinginkan, selanjutnya adalah memilih style atau ukuran font, umumnya style font yang sering di gunakan di website adalah :
300, Regular, Italic, 600, 700, 900
Silahkan pilih style yang diinginkan, namun saya menyarankan menggunakan 6 style yang saya sebutkan diatas.
3. Download File Font
Selanjutnya scroll ke bawah lalu Download file fonts dan extract menggunakan winrar,winzip atau 7zip.
Kita akan mengupload file font ini ke dalam hosting kita.
4. Upload File Font Ke Hosting
Langkah selanjutnya adalah mengupload semua file font yang telah kita download tadi ke dalam hosting kita, untuk langkah ini kita memerlukan akses ke dalam “File Manager” pada cPanel, atau menggunakan FTP.
Sebelum mengupload semua file, silahkan buat folder bernama “fonts” (gambar 1) didalam folder theme yang digunakan, susunan lokasi nya adalah : /public_html/namawebsitekamu.com/wp_content/themes/namatheme/fonts
sesuaikan namatheme dengan theme yang kamu gunakan, sebagai contoh disini saya menggunakan theme bernama hello
Lalu upload lah semua file font tadi kedalam folder fonts yang telah kita buat. (gambar 2)
5. Copy Kode CSS
Selanjutnya kita akan mengcopy kode CSS yang ada untuk kita tempelkan ke website wordpress kita, namun sebelum mengcopy kode css ini, kita harus mengisi lokasi folder fonts yang telah kita buat pada step sebelumnya.
Lokasi nya secara umum akan seperti ini: https://namawebsitekamu.com/wp_content/themes/namatheme/fonts/
ganti namawebsitekamu.com dengan domain kamu sendiri, lalu isikan link tersebut kedalam kolom Customize folder prefix (optional) (gambar 1), maka hasilnya akan seperti pada gambar 2. Jika sudah copykan seluruh kode CSS tersebut dan pastekan di notepad, kita akan membutuhkan nya nanti.
6. Menambahkan Font ke Elementor
Untuk menambahkan font ke elementor, silahkan masuk ke menu Elementor pada dashboard admin wordpress lalu pilih Custom Fonts, dan klik Add New (gambar 1).
Berikan nama font sebagai pengingat (gambar 2), dan masukan lokasi font yang telah kita upload sebelumnya (gambar 3).
Tiap font memiliki 5 jenis tipe, yaitu WOFF, WOOF2, TTF,SVG dan EOT, maka kita perlu memasukan link lokasi font untuk tiap jenis tipe nya.
Lokasi yang telah kita buat pada step 5 seperti ini : https://namawebsitekamu.com/wp_content/themes/namatheme/fonts/
Maka, tiap kolom font url link nya harus diisi seperti ini:
https://namawebsitekamu.com/wp_content/themes/namatheme/fonts/poppins-v15-latin-regular.woff
https://namawebsitekamu.com/wp_content/themes/namatheme/fonts/poppins-v15-latin-regular.woff2
https://namawebsitekamu.com/wp_content/themes/namatheme/fonts/poppins-v15-latin-regular.ttf
https://namawebsitekamu.com/wp_content/themes/namatheme/fonts/poppins-v15-latin-regular.svg#Poppins
https://namawebsitekamu.com/wp_content/themes/namatheme/fonts/poppins-v15-latin-regular.eot
Kamu cukup copy paste saja link nya kedalam kolom jenis font ini, Isikan link font kedalam kolom nya masing-masing (gambar 3), dan lakukan hingga semua jenis font telah terisi (gambar 4).
Untuk menambahkan jenis font lainnya, klik ADD FONT VARIATION
Jika semua nya dilakukan dengan benar, maka hasil nya dapat di lihat pada gambar KLIK DISINI
Terakhir klik PUBLISH untuk menyimpan perubahan.
Supply:
- Google Font dan Elementor Pro
Tools:
- – Google Font Helper
- – Elementor Pro
- – File Manager cPanel (optional)
Setelah semua langkah diatas dilakukan, kita masih perlu memasukan kode CSS yang telah kita simpan di notepad pada step ke 5 diatas.
Menambahkan Kode CSS Google Fonts di Elementor
Agar font yang telah kita download dan atur pada custom font elementor dapat di tampilkan, maka kita perlu menambahkan kode css pada Additional CSS, silahkan masuk ke menu Appearance – Themes – Customize
Lalu pilih Additional CSS, dan pastekan semua kode css dan klik PUBLISH
Cara Menggunakan Custom Font di Elementor
Untuk menggunakan custom font Google Font yang telah kita rubah menjadi lokal font di elementor, kita perlu melakukan settingan di Elementor terlebih dahulu, agar nantinya Google Font ini akan menjadi Font Default pada saat kita melakukan editing halaman menggunakan Elementor.
Buka halaman yang akan di edit menggunakan elementor, ketika halaman elementor telah terbuka lalu klik menu hamburger pada pojok kiri atas, masuk ke Site Settings – Global Fonts dan rubah lah default menjadi font yang kamu gunakan, pada contoh ini saya menggunakan Poppins. Perhatikan gambar dibawah:
Kamu juga dapat merubah keseluruhan font pada tiap kategori nya.
- Primary
- Secondary
- Text
- Accent
Jika telah selesai jangan lupa klik update.
Sampai disini pengaturan global font telah selesai, dan seharusnya default font telah berubah menjadi Custom Google Font. Dan seharusnya kecepatan loading website sudah bertambah lebih cepat karena kita telah merubah google font menjadi lokal font di elementor.
Agar kecepatan lebih maksimal, kamu juga bisa baca tutorial lengkap mempercepat loading wordpress pada tutorial dibawah ini
Baca Juga: Cara Mempercepat WordPress Score 100 di PageSpeed Insights
Pertanyaan:
Apakah Dapat Menggunakan 2 Custom Font Bersamaan?
Menggunakan custom font secara bersamaan bisa saja dilakukan tetapi tidak direkomendasikan
Apakah Kecepatan Website Pasti Akan Bertambah?
Silahkan di tes sendiri ya :), karena selain merubah google font menjadi lokal font, masih ada beberapa faktor yang harus diperhatikan seperti penggunaan gambar, efek, element lain di elementor
Apakah Cara Ini Bisa Dilakukan Pada Semua Tema?
Tentu bisa, tapi perlu diingat cara merubah google font menjadi lokal font di elementor kali ini dikhususkan untuk penggunaan elementor, dan untuk blog yang tidak menggunakan elementor, akan ada sedikit perbedaan pengaturannya.
Kapan Bikin Tutorial Untuk Tema Tanpa Menggunakan Elementor?
Secepatnya ya, doakan saja saya selalu sehat dan bisa membuat postingan lain nya tentang optimasi kecepatan wordpress 🙂
Kesimpulan
Merubah Google Font menjadi Lokal Font di Elementor untuk mempercepat loading website merupakan satu dari beberapa teknik optimasi kecepatan website wordpress, setelah melakukan perubahan ini, silahkan lakukan tes kecepatan website nya, apakah berubah atau tidak.
Kamu bisa melakukan tes uji kecepatan wordpress di 5 Website Penguji Kecepatan WordPress Terbaik yang dapat kamu baca disini
Semoga Tutorial cara merubah google font menjadi lokal font di elementor ini bermanfaat, dan selamat mencoba 🙂
