Cara Menambahkan Font Kustom ke WordPress
Catatan: Dalam topik berikutnya yang akan Anda baca, Anda akan mempelajari tentang: Cara Menambahkan Font Kustom ke WordPress
Apakah Anda ingin menambahkan font WordPress khusus? Dengan font khusus, Anda dapat menggunakan kombinasi indah dari berbagai font di situs web Anda untuk menyempurnakan tipografi dan pengalaman pengguna.
Selain terlihat bagus, font khusus juga dapat membantu Anda meningkatkan keterbacaan, menciptakan citra merek, dan meningkatkan waktu yang dihabiskan pengguna di situs Anda.
Pada artikel ini, kami akan menunjukkan cara menambahkan font khusus ke WordPress menggunakan Google Fonts, TypeKit, dan metode CSS3@Font-Face.
catatan: Memuat terlalu banyak font dapat memperlambat situs Anda. Kami merekomendasikan memilih dua font dan menggunakannya di situs web Anda. Kami juga akan menunjukkan cara memuatnya dengan benar tanpa memperlambat situs Anda.
Sebelum kita melihat cara menambahkan font khusus ke WordPress, mari kita lihat untuk menemukan font khusus yang dapat Anda gunakan.
Bagaimana menemukan font khusus untuk digunakan di WordPress
Air mancur dulu mahal, tapi sekarang tidak lagi. Ada banyak tempat untuk menemukan font web gratis yang bagus seperti Google Fonts, Typekit, FontSquirrel, dan Font.com.
Jika Anda tidak tahu cara mencampur dan mencocokkan font, cobalah Memasangkan. Bantu desainer menyusun font Google yang indah.
Ingatlah bahwa menggunakan terlalu banyak font khusus akan memperlambat situs Anda saat Anda memilih font. Itu sebabnya Anda harus memilih dua font dan menggunakannya di seluruh desain Anda. Ini juga akan memberikan konsistensi dalam desain Anda.
Video tutorial
Mendaftar untuk WPBeginner
Jika Anda tidak menyukai videonya atau menyukai instruksi tertulisnya, teruslah membaca.
Tambahkan font WordPress khusus dari Google Fonts
Google Fonts adalah pustaka font terbesar, gratis, dan paling banyak digunakan di antara pengembang situs web. Ada beberapa cara untuk menambahkan dan menggunakan font Google di WordPress.
metode 1: Tambahkan font khusus dengan plugin Google Easy Fonts
Jika Anda ingin menambahkan dan menggunakan font Google ke situs web Anda, cara ini paling mudah dan direkomendasikan untuk pemula.
Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin Easy Google Fonts. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.
Setelah aktivasi, Anda dapat pergi ke Penampilan » Kustomisasi tambahan. Ini akan membuka antarmuka penyesuai tema langsung di mana Anda akan melihat bagian Tipografi baru.
Dengan mengklik Font, Anda akan melihat berbagai bagian situs tempat Anda dapat menggunakan font Google. Cukup klik “Edit Sumber” di bagian yang ingin Anda edit.
Di bagian keluarga font, Anda dapat memilih font Google yang ingin Anda gunakan di situs Anda. Anda juga dapat memilih font, ukuran, isian, margin, dan lainnya.
Bergantung pada tema Anda, jumlah bagian di sini mungkin terbatas, dan Anda mungkin tidak dapat mengubah font untuk berbagai area di situs Anda.
Untuk mengatasinya, plugin ini juga memungkinkan Anda membuat kontrol sendiri dan menggunakannya untuk mengubah font di situs Anda.
Pertama Anda harus mengunjungi Pengaturan » Google Font dan masukkan nama untuk kontrol font Anda. Gunakan sesuatu untuk memahami dengan cepat di mana Anda akan menggunakan kontrol sumber ini.
Kemudian klik tombol “Buat kontrol font” dan Anda akan diminta untuk memasukkan pemilih CSS.
Anda dapat menambahkan elemen HTML yang ingin Anda targetkan (misalnya h1, h2, p, blockquote) atau menggunakan kelas CSS.
Anda dapat menggunakan alat inspeksi di browser Anda untuk mengetahui kelas CSS apa yang digunakan oleh area tertentu yang ingin Anda ubah.
Sekarang klik “Simpan Kontrol Sumber” untuk menyimpan pengaturan Anda. Anda dapat membuat driver font sebanyak yang Anda perlukan untuk berbagai bagian situs Anda.
Untuk menggunakan driver font ini, Anda harus pergi ke Penampilan » Kustomisasi dan klik tab Gaya.
Dalam tipografi sekarang Anda akan melihat opsi “tipografi tematik”. Mengkliknya akan memunculkan kontrol font khusus yang Anda buat sebelumnya. Anda sekarang dapat mengklik tombol edit untuk memilih font dan tampilan kontrol ini.
Jangan lupa klik tombol Simpan atau Terbitkan untuk menyimpan perubahan Anda.
Metode 2: Tambahkan Font Google ke WordPress Secara Manual
Metode ini mengharuskan Anda menambahkan kode ke file tema WordPress Anda. Jika Anda belum pernah melakukannya, lihat panduan kami tentang cara menyalin dan menempelkan kode ke WordPress.
Pertama, buka perpustakaan font Google dan pilih font yang ingin Anda gunakan. Kemudian klik tombol gunakan cepat di bawah font.
Di halaman font, Anda akan melihat gaya yang tersedia untuk font tersebut. Pilih gaya yang ingin Anda gunakan dalam proyek Anda, lalu klik tombol sidebar di bagian atas.
Kemudian Anda perlu beralih ke tab “Sematkan” di sidebar untuk menyalin kode sematan.
Ada dua cara untuk menambahkan kode ini ke situs WordPress Anda.
Anda hanya perlu mengedit file header.php tema Anda terlebih dahulu dan menempelkan kodenya terlebih dahulu
label.
Namun, jika Anda tidak mengetahui kode pengeditan di WordPress, Anda dapat menggunakan plugin untuk menambahkannya.
Instal dan aktifkan hanya plugin Sisipkan Header dan Footer. Untuk informasi lebih lanjut, lihat panduan langkah demi langkah kami tentang cara memasang plugin WordPress.
Setelah aktivasi, buka Pengaturan » Sisipkan header dan footer dan rekatkan kode embed di kotak “Script in Header”.
Jangan lupa klik tombol Simpan untuk menyimpan perubahan Anda. Plugin sekarang akan mulai memuat kode semat Google Font di setiap halaman situs Anda.
Anda dapat menggunakan font ini di stylesheet tema Anda seperti ini:
.h1 judul situs {font-family: ‘Open Sans’, Arial, sans-serif; }
Untuk petunjuk lebih rinci, lihat panduan kami tentang cara menambahkan font Google ke tema WordPress.
Tambahkan font WordPress khusus dengan Typekit
Adobe Fonts Typekit adalah sumber daya gratis dan premium lainnya untuk font mengagumkan yang dapat Anda gunakan dalam proyek desain Anda. Mereka memiliki langganan berbayar, serta paket gratis terbatas yang dapat Anda gunakan.
Cukup daftar akun font Adobe dan buka bagian pencarian font. Dari sini Anda harus mengklik tombol untuk memilih sumber dan membuat proyek.
Kemudian Anda melihat kode semat dengan ID proyek Anda. Itu juga menunjukkan cara menggunakan font di CSS tema Anda.
Anda perlu menyalin dan menempelkan kode ini
bagian dari situs web mereka.
Ada dua cara untuk menambahkan kode ini ke situs WordPress Anda.
Anda hanya perlu mengedit file header.php tema Anda terlebih dahulu dan menempelkan kodenya terlebih dahulu
label.
Namun, jika Anda tidak mengetahui kode pengeditan di WordPress, Anda dapat menggunakan plugin untuk menambahkannya.
Instal dan aktifkan hanya plugin Sisipkan Header dan Footer.
Setelah aktivasi, buka Pengaturan » Sisipkan header dan footer dan rekatkan kode embed di kotak “Script in Header”.
Itu saja, Anda sekarang dapat menggunakan font Typekit pilihan Anda di template tema WordPress Anda seperti ini:
h1 .site-title {font-family: gilbert, sans-serif; }
Untuk petunjuk lebih rinci, lihat panduan kami tentang cara menambahkan font keren ke WordPress dengan Typekit.
Tambahkan font WordPress khusus dengan CSS3 @font-face
Cara paling langsung untuk menambahkan font khusus ke WordPress adalah dengan menambahkan font menggunakan metode CSS3@font-face. Metode ini memungkinkan Anda menggunakan font apa pun di situs web Anda.
Hal pertama yang harus dilakukan adalah mengunduh font yang Anda inginkan dalam format web. Jika Anda tidak memiliki format web untuk font Anda, Anda dapat mengonversinya dengan FontSquirrel Web Font Generator.
Setelah Anda memiliki file font web, Anda harus mengunggahnya ke server hosting WordPress Anda.
Tempat terbaik untuk mendapatkan font ada di folder “font” baru di tema atau tema anak Anda.
Anda dapat menggunakan FTP atau File Manager dari cPanel Anda untuk mengunduh font.
Setelah Anda mengunggah font, Anda harus mengunggah font di stylesheet tema Anda menggunakan aturan font-face CSS3 seperti ini:
@ font-face {font-family: Arvo; src: url (https://www.example.com/wp-content/theme/your-theme/fonts/Arvo-Regular.ttf); font-berat: normal; }
Jangan lupa untuk mengganti keluarga font dan URL Anda.
Anda kemudian dapat menggunakan font itu di manapun pada stylesheet tema Anda:
.h1 judul situs {font-family: “Arvo”, Arial, sans-serif; }
Memuat font secara langsung menggunakan CSS3 @font-face tidak selalu merupakan solusi terbaik. Jika Anda menggunakan font Google atau font toolkit, sebaiknya sajikan font langsung dari server Anda untuk performa optimal.
Itu saja, kami harap artikel ini membantu Anda menambahkan font WordPress kustom. Anda juga dapat melihat panduan kami tentang cara menggunakan font ikon di WordPress dan cara mengubah ukuran font di WordPress.
Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton tutorial video WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.
