Cara Menambahkan Font Kustom Di Situs WordPress [2022]

Diterbitkan: 2022-05-05

Apakah Anda tahu apa bagian utama dari desain web Anda? Menambahkan font khusus ke situs web WordPress adalah langkah terakhir yang dapat Anda ambil untuk menjaga pengunjung situs web Anda tetap di situs Anda dan meningkatkan keterbacaan situs web. Font yang Anda pilih untuk situs web mewakili citra merek Anda. Mari selami untuk mempelajari tentang font khusus dengan seluk beluknya.

custom fonts

Meskipun Anda akan menemukan font gratis secara online, Anda akan dibatasi untuk menggunakannya berdasarkan kompatibilitas tema Anda. Itu sebabnya kami akan menjelaskan cara menambahkan font khusus di WordPress menggunakan cara manual dan plugin WordPress.

Mengapa Menggunakan Font Kustom Dan Di Mana Menemukannya?

Seperti disebutkan di atas, Anda akan menemukan banyak situs tempat Anda dapat dengan mudah mengunduh font. Misalnya, Font Squirrel hadir dengan hingga tiga font gratis yang dapat Anda gunakan. Google Fonts adalah opsi luar biasa lainnya di mana Anda akan menemukan lebih dari 900 font untuk dipilih. Selain itu, Edge Web Fonts juga dapat menawarkan berbagai macam font. Untuk penggunaan pribadi, Anda dapat memilih Fonts.com atau 1001 Font Gratis .

DaFont adalah perpustakaan font tertua yang memiliki lebih dari 60.000 tipografi dari mana Anda dapat memfilter font yang Anda inginkan. Anda perlu mengunduh font yang dipilih dan tidak seperti integrasi Google Font. Jenis perpustakaan font yang serupa adalah UrbanFont dengan sejumlah besar font kreatif dan menguntungkan.

custom fonts

Adobe Fonts atau Typekit adalah pustaka font yang sangat berguna untuk semua desainer web karena memiliki 1900+ font yang tersedia. Bahkan jika Anda berlangganan akun gratis, itu masih menawarkan 200+ font web.

Jika Anda ingin menyewa font setiap bulan dan membayar biaya berlangganan, Anda dapat menggunakan Fontstand . Ini menawarkan sekitar 2000 font luar biasa dan menagih Anda setiap bulan. Sama seperti Type Network ini adalah perpustakaan font yang dihosting sendiri di mana Anda akan mendapatkan lebih dari 400 keluarga font sekaligus dan menjelajah dengan mudah.

Bagaimana Cara Memilih Font Kustom Terbaik Untuk Situs Web?

Karena Anda sudah mengetahui sumber daya untuk menemukan font kustom yang diinginkan untuk WordPress, Anda perlu tahu cara memilih font terbaik sekarang. Memfilter font acak akan membuat proses pemilihan Anda panjang dan canggung. Sebagai gantinya, Anda dapat mencoba langkah-langkah berikut saat memilih font khusus terbaik untuk situs web WordPress. Di blog ini, kita akan menjelajahi Google Font untuk memilih font terbaik dan melihat praktik terbaik sambil memfilter semua font.

custom fonts

Shortlist Fonts You Like – Di Google font Anda dapat dengan mudah mencari font yang diinginkan di kotak pencarian dan mengatur kategorinya. Hasil pencarian akan diubah sesuai dengan penyesuaian Anda. Anda dapat melihat font dalam alfabet, angka numerik, dan format lainnya.

Periksa Detail Font- Memeriksa detail font itu penting karena Anda akan melihat semua gaya dan ukuran font yang tersedia secara sekilas. Keuntungan luar biasa yang akan Anda temukan dengan Google Font adalah ia menampilkan pasangan populer dengan font itu.

custom fonts

Saat memeriksa detail font, perhatikan juga format font. Karena tidak semua font mendukung semua sistem browser. Berikut adalah daftar browser terbaru dan daftar format font yang didukung.

custom fonts

Sumber – https://www.w3schools.com/Css/css3_fonts.asp

Perkaya Koleksi Font Anda- Setelah selesai memfilter font yang tepat, Anda dapat menambahkan font ini ke koleksi Anda hanya dengan mengklik tombol ' Pilih Font Ini' .

Metode Mudah Untuk Menambahkan Font Kustom ke Situs WordPress

Kami telah mengumpulkan beberapa cara termudah untuk menambahkan font khusus ke situs web Anda dalam format langkah demi langkah. Mari selami dan lihat bagaimana melakukannya.

Cara Menambahkan Font Kustom Secara Manual Di WordPress

Menambahkan font khusus secara manual adalah cara paling bijaksana untuk tidak membuat situs web Anda menjadi lambat. Karena Anda telah menjelajahi beberapa ukuran font untuk menemukan font yang diinginkan, unduh font terlebih dahulu. Sekarang Anda perlu mengunggah font ke akun hosting situs web Anda. Lihat tema mana yang Anda gunakan untuk situs WordPress Anda. Unggah file CSS font Anda ke akun Anda. Saat mengunduh font, ingatlah untuk mengekstrak file dari file .zip.

Untuk mengunggah file font Anda, buka direktori wp-content/themes/your-theme/fonts. Anda dapat membuat folder font terpisah untuk kenyamanan Anda. Upload file menggunakan File Manager ke hPanel. Sekarang arahkan ke akun WordPress Anda dan klik opsi Appearance . Pilih Editor Tema di mana Anda akan diperlihatkan file style.css. Tambahkan kode berikut di bagian bawah kode.

@font-wajah {

font-family: Aguafina Script-Regular;

src: url ( http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf );

font-berat: normal;

}

Sekarang klik tombol 'Perbarui File' untuk menyimpan perubahan. Ingatlah bahwa kode font-face memuat font setiap kali pengunjung datang ke situs Anda. Jenis huruf, bagaimanapun, belum diterapkan ke elemen apa pun. Anda harus mengubah file style.css yang sama untuk menetapkan font ke elemen tertentu. Kode berikut, misalnya, akan membuat judul situs web kita menggunakan skrip font.

.situs-judul {

font-family: “Aguafina Script-Regular” , Arial, sans-serif;

}

Cara Mengatur Font Kustom Menggunakan Plugin WordPress

Untuk semua pengguna WordPress, menggunakan plugin font adalah cara termudah untuk mengatur font kustom. Di sini kami telah menyajikan beberapa plugin font termudah dan paling berguna untuk menambahkan font kustom di situs WordPress.

WP Google Font

custom fonts

Anda dapat menggunakan font khusus dan menerapkannya ke elemen CSS tertentu menggunakan plugin WP Google Fonts . Instal plugin WP Google Fonts dari direktori plugin WordPress dan gunakan dasbor WordPress Anda untuk mengakses Panel Kontrol Font Google. Anda dapat memilih tipografi dan menyesuaikan opsi seperti gaya font, elemen yang dialokasikan, dan banyak lagi.

Plugin Font

custom fonts

Plugin Fonts adalah alternatif freemium untuk Easy Google Fonts yang bekerja dengan cara yang serupa, memungkinkan Anda untuk mengintegrasikan Google Fonts ke halaman Anda dengan lancar tanpa harus mengubah tema Anda. Ini juga berfungsi dengan Customizer, memungkinkan Anda untuk mencoba opsi font alternatif sebelum menerbitkannya. Plugin Fonts juga memiliki integrasi Adobe Fonts, yang merupakan bonus. Plugin Font memungkinkan Anda untuk menggunakan perpustakaan jenis huruf Adobe dalam materi Anda juga.

Buat Situs Web Menarik Menggunakan Font Kustom

Keterbacaan dan keanggunan teks Anda berdampak pada seberapa banyak pengunjung Anda menikmati menjelajahi situs Anda. Siapapun sekarang dapat memilih dari sejumlah besar tipografi untuk digunakan di situs web mereka. Tidak ada alasan mengapa Anda menggunakan font lama di situs web Anda akhir-akhir ini. Menyesuaikan tipografi WordPress Anda sekarang sepenuhnya dalam kendali Anda.

Jika menurut Anda blog ini menarik dan bermanfaat, berlanggananlah ke blog kami untuk membaca lebih banyak blog seperti ini. Bergabunglah dengan komunitas kami untuk membagikan pemikiran Anda juga.