Apakah Anda ingin menambahkan font pihak ketiga ke situs web Anda tanpa memperlambat kecepatan situs web Anda?
Font khusus meningkatkan tipografi dan pengalaman pengguna situs web Anda, tetapi membutuhkan waktu lebih lama untuk memuat. Kabar baiknya adalah Anda dapat menghosting font Anda secara lokal untuk memastikan situs web Anda selalu cepat.
Pada artikel ini, kami akan menunjukkan cara menghosting font lokal di WordPress.
Mengapa Menghosting Font Secara Lokal di WordPress?
Sementara tipografi dan font khusus dapat meningkatkan estetika situs web secara keseluruhan, hal itu berdampak negatif pada Anda Performa WordPress. Misalnya, jika Anda menggunakan font khusus dari font Google, font tersebut dimuat dari layanan pihak ketiga yang akan memperlambat situs web Anda.
Untungnya, ada cara untuk menggunakan font khusus tanpa memperlambat situs Anda. API Webfonts baru diperkenalkan di WordPress 6.0. Ini memungkinkan Anda menghosting font secara lokal sehingga memuat lebih cepat.
Alasan lain untuk menghosting Google Fonts secara lokal adalah untuk tetap mematuhi GDPR. Itu pertimbangan hukum yang penting jika Anda memiliki pengunjung situs web dari Uni Eropa.
Saat seseorang mengunjungi situs web yang menggunakan Google Font, alamat IP mereka dicatat oleh Google saat font dimuat. Karena ini dilakukan tanpa izin mereka, UE sekarang menganggap bahwa itu adalah pelanggaran peraturan privasi, dan Anda mungkin bertanggung jawab atas kerugian.
Karena itu, mari kita lihat cara menghosting font lokal di WordPress untuk situs web yang lebih cepat. Kami akan membahas dua metode, dan metode pertama direkomendasikan untuk sebagian besar pengguna.
Metode 1: Hosting Font Lokal di WordPress Dengan Plugin
Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin OMGF (Optimize My Google Fonts). Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.
OMGF adalah salah satu plugin tipografi WordPress terbaik. Ini menawarkan cara ramah pemula untuk meningkatkan kinerja dan kepatuhan GDPR dengan menghosting Google Fonts secara lokal.
Setelah aktivasi, Anda perlu mengunjungi Pengaturan » Optimalkan Google Font untuk mengkonfigurasi plugin. Anda harus melihat tab ‘Optimalkan Font’.
Perhatikan pernyataan di bawah tajuk ‘Optimalkan Google Fonts’ bahwa Anda hanya perlu menggunakan setelan default untuk mengganti Google Fonts secara otomatis dengan salinan yang dihosting secara lokal.
Itu berarti bahwa saat Anda menggulir ke bawah halaman pengaturan, yang perlu Anda lakukan adalah memastikan bahwa ‘Opsi Tampilan Font’ memiliki pengaturan default ‘Tukar (disarankan)’ yang dipilih.
Yang perlu Anda lakukan sekarang adalah mengklik tombol ‘Simpan & Optimalkan’ di bagian bawah halaman.
Anda akan melihat pesan di bagian atas layar yang menyatakan ‘Pengoptimalan berhasil diselesaikan’.
Selamat! Font Google Anda sekarang dihosting secara lokal. Situs web Anda akan memuat lebih cepat dan Anda telah mengurangi risiko tuntutan hukum Eropa.
Metode 2: Hosting Font Lokal di WordPress Secara Manual
Anda juga dapat menghosting font secara lokal tanpa menggunakan plugin dengan menggunakan metode @font-face dari panduan kami tentang cara menambahkan font khusus di WordPress. Meskipun metode ini membutuhkan lebih banyak pekerjaan, ini memungkinkan Anda menggunakan font apa pun yang Anda suka di situs web Anda.
Anda perlu mengunduh font yang ingin Anda gunakan dalam format web. Ada banyak tempat untuk menemukan font web gratis yang bagus, seperti Google Fonts, Typekit, FontSquirrel, dan banyak lagi.
Jika Anda tidak memiliki format web untuk font Anda, Anda dapat mengonversinya menggunakan generator FontSquirrel Webfont.
Sekarang Anda perlu menyimpan font di server hosting WordPress Anda. Anda dapat mengunggah file menggunakan FTP atau menggunakan Pengelola File cPanel host Anda.
Anda harus membuat folder baru bernama ‘font’ di direktori tema atau tema anak Anda dan mengunggahnya di sana.
Setelah Anda mengunggah font, Anda perlu memuat font di lembar gaya tema Anda menggunakan CSS khusus. Anda dapat menambahkan kode langsung ke file style.css tema Anda, atau dengan menggunakan bagian CSS tambahan dari penyesuai tema.
Anda dapat melakukannya menggunakan aturan CSS3 @font-face seperti ini:
@font-face
font-family: Arvo;
src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
font-weight: normal;
Jangan lupa untuk mengganti keluarga font dan URL dengan milik Anda sendiri.
Setelah itu, Anda dapat menggunakan font itu di mana saja di stylesheet tema Anda atau bagian CSS tambahan dari penyesuai tema. CSS yang Anda gunakan akan tergantung pada tema Anda dan di mana Anda ingin menggunakan font lokal. Berikut adalah contoh dari situs web demo kami:
h1
font-family: Arvo, Arial, sans-serif;
Seperti yang Anda lihat, tajuk kami sekarang menggunakan font Arvo yang dihosting secara lokal.
Kami harap tutorial ini membantu Anda mempelajari cara menghosting font lokal di WordPress untuk situs web yang lebih cepat. Anda mungkin juga ingin mempelajari cara meningkatkan lalu lintas blog Anda, atau lihat daftar plugin WordPress yang harus dimiliki untuk mengembangkan situs Anda.
Jika Anda menyukai artikel ini, silakan berlangganan tutorial video Saluran YouTube kami untuk WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.
Hubungi Kami
