Cara Menambahkan Font Kustom ke Situs WordPress

Apakah Anda ingin mempelajari cara menambahkan font khusus ke situs web WordPress?

Mengapa membuat blog Anda membosankan dengan menggunakan font standar? Biarkan blog Anda berbicara tentang kepribadian Anda yang bersemangat dan topik yang Anda bahas dengan berbagai macam font khusus. Font khusus adalah fitur keren yang membuat blog Anda terlihat lebih disukai daripada orang lain.

Mari kita hadapi itu; kita semua menyukai blog dan situs web dengan font yang tepat. Mereka tidak hanya menghiasi situs web tetapi juga membantu menarik pengguna ke konten Anda. Namun, pilihan font WordPress standar terbatas dan tergantung pada tema yang Anda gunakan. Kabar baiknya adalah Anda dapat menambahkannya secara manual atau dengan plugin WordPress khusus.

Dan di sini muncul dua pertanyaan: di mana mendapatkan font khusus untuk WordPress dan cara memasang font khusus di situs web Anda.

Mari kita cari tahu.

Mengapa saya harus menggunakan font khusus?

Lewatlah sudah hari-hari ketika Times New Roman dan Georgia dianggap sebagai satu-satunya tipografi untuk teks di situs web. Selama beberapa tahun terakhir, ruang font telah benar-benar berubah dengan munculnya font seperti Google Font dan lain-lain.

Saat ini, ada ratusan font gratis, bantuan informasi dan pelatihan, serta sumber daya desain yang tersedia di Internet. Tidak seperti Adobe Illustrator, Photoshop, dan aplikasi klasik lainnya, WordPress tidak memberi Anda kendali penuh atas font default. Hanya tema WordPress tertentu yang memilih untuk mendukung dan menggunakan font khusus.

Oleh karena itu, dalam artikel ini, Anda akan mempelajari cara menemukan font khusus yang sesuai dan menggunakannya di situs web WordPress Anda.

Pentingnya menggunakan font khusus

Mengapa mengubah font, indentasi kata, spasi baris, spasi huruf, atau saturasi font, Anda bertanya? Namun, beberapa penelitian menunjukkan bahwa tipografi meningkatkan pemahaman membaca.

Banyak tergantung pada konstruksi font. Pada tingkat sadar dan bawah sadar – setiap orang mengevaluasi konten halaman web berdasarkan desain.

Desain font mempengaruhi pembaca, bahkan jika mereka tidak memperhatikannya. Menyerah pada desain font berarti menyerah pada pengembangan itu sendiri! Suasana hati pembaca tergantung padanya. Font memudahkan untuk membaca atau memaksa pengguna untuk meninggalkan halaman.

Semua browser web menyertakan satu set font default. Ini berarti bahwa jika font tidak ditentukan dalam CSS halaman, versi standar akan digunakan. Anda masih dapat menggunakan font default, tetapi akan mempersulit pengguna. Inilah sebabnya mengapa penting untuk menggunakan font khusus. Jika tema WordPress Anda tidak memberi Anda opsi untuk mengubah font, ada banyak situs web dan alat yang dapat membantu.

Alternatif Google Font

Banyak dari Anda yang tahu Font Google. Ada banyak lagi situs web tempat Anda dapat menemukan font yang indah. Beberapa di antaranya gratis untuk penggunaan pribadi. Jika Anda membutuhkan penggunaan komersial, Anda memerlukan lisensi. Google Font dan Adobe Edge Font gratis. Inilah sebabnya mengapa mereka tidak begitu unik.

Berikut adalah beberapa sumber daya lain untuk menemukan font untuk penggunaan gratis dan komersial:

1. TemplateMonster — Di situs web TemplateMonster Anda akan menemukan semua yang Anda butuhkan untuk desain web. Ada juga banyak font dan paket font untuk penggunaan pribadi dengan harga murah. Selain itu, Untuk membantu Anda memilih, semua font disajikan pada brosur atau bingkai. Setiap font juga disajikan dengan lisensi komersial.
2. MyFonts — MyFonts saat ini menawarkan pilihan font terbesar di dunia. Namun, harga di sini juga berada di segmen atas. Jadi, jika Anda memiliki anggaran yang ketat, ini mungkin bukan untuk Anda.
3. FontMusim Semi — Fontspring menjual font baru untuk penggunaan komersial. Tetapi di hampir setiap keluarga, 1-2 font gratis dapat digunakan untuk keperluan pribadi. Juga, ada bagian terpisah dengan font gratis. Koleksinya semarak. Tetapi Anda perlu mempelajari informasi lisensi untuk font tertentu dengan cermat sebelum mengunduh.
4. cufont — Ini juga merupakan koleksi besar font yang berbeda. Pilih salah satu, dan Anda akan melihat halaman dengan informasi rinci tentangnya. Ada banyak font gratis, dan mereka dibagi menjadi beberapa bagian. Sistem penyortiran pada CufonFonts cukup fleksibel dan nyaman. Juga, dukungan Webfont disertakan.
5. Dafont — Koleksi 3 font gratis lainnya yang dapat diakses. Kebanyakan dari mereka dirancang untuk penggunaan pribadi saja. Fitur DaFont yang keren adalah sistem kategori. Anda dapat memilih font dalam gaya komik, video game, vintage dll….

Pemilihan font sangat menggiurkan karena semuanya cantik. Tapi Anda tidak harus memilih banyak. Jangan gunakan lebih dari dua font di situs web. Kemudiantampilan website Anda akan konsisten. Setelah Anda memilih font, pastikan untuk mengunggah file untuk setiap gaya yang akan Anda gunakan (biasa, tebal, miring, dll.).

Sekarang setelah Anda memilih font yang sesuai untuk situs web Anda, mari cari tahu cara menambahkannya.

Cara Menambahkan Font Kustom ke WordPress

Ada beberapa cara untuk menambahkan font ke situs WordPress:

1. plugin : dalam hal ini, berbeda plugin WordPress digunakan untuk mempermudah proses
2. manual : menggunakan metode ini, Anda memerlukan unduhan font yang diunduh dari situs dan memodifikasi file CSS.
3. tema: Banyak tema populer memiliki opsi bawaan untuk menyesuaikan font Anda (catatan – kami tidak akan membahas opsi ini karena prosesnya akan bervariasi tergantung pada tema yang Anda gunakan.

Opsi 1 – Ubah Font WordPress dengan Plugin

Jika kita tidak peduli dengan perubahan global, kita dapat menginstal plugin WordPress yang akan mengubah font di situs web Anda.

Fitur Plugin Font Kustom

Perangkat lunak open source memiliki keunggulan untuk kepentingan komunitas, dan WordPress juga memiliki keunggulan tersebut. Beberapa plugin WordPress memungkinkan Anda menambahkan font khusus. Bagaimana cara memilih plugin yang sesuai ketika ada begitu banyak? Apa saja fitur plugin WordPress font kustom?

Berikut adalah beberapa poin untuk dipertimbangkan:

• Kemampuan untuk menggunakan font khusus
• Kemampuan untuk menggunakan banyak font
• Header dan komponen target
• Bonus: kemampuan untuk mengubah pengaturan font dari editor visual

Itu saja. Karakteristik pertama dalam daftar sangat penting. Anda masih dapat mengunduh font dari situs web seperti DaFont, Font Squirrel, dll., tetapi Anda harus dapat mengunggahnya ke WordPress.

Mari kita lihat beberapa plugin untuk WordPress yang memungkinkan Anda mengunggah font khusus.

1. Font Luar Biasa Lebih Baik

Plugin WordPress ini akan memungkinkan para penggunanya untuk secara otomatis menggabungkan versi terbaru dari font Better Font Awesome dengan CSS, kode pendek, dan lainnya. Selain itu, plugin WordPress ini diperbarui secara otomatis.

Anda akan menemukan di sana sebagai fitur: pembaruan rutin, generator kode pendek, kompatibilitas dengan plugin WordPress lainnya, dll ...

Download | Demo | Hébergement Web

2. Google Fonts untuk WordPress

Plugin WordPress ini terdiri dari font khusus 877, yang akan memungkinkan Anda untuk menggunakan semua font di situs WordPress Anda. Berkat pratinjau waktu-nyata, itu akan memungkinkan Anda untuk melihat seperti apa situs web Anda setelah font diterapkan. 

Selain itu, Anda akan dapat menyimpan dan mengeditnya di frontend ketika Anda menemukan kombinasi yang akan Anda nikmati.

Fitur-fiturnya meliputi: pratinjau waktu-nyata, a SEO yang cukup maju, dukungan multibahasa, dukungan untuk lebih banyak 870 + Google Font, pembaruan mudah dan banyak lagi.

Download | Demo | Hébergement Web

3. Plugin Font

Font Plugin adalah plugin WordPress gratis yang memungkinkan pengguna mengakses perpustakaan Google Fonts dan Adobe Fonts. Dengan plugin WordPress ini, Anda dapat memilih lebih dari 1000 font Google dan Adobe, menggunakan beberapa font di situs web Anda, dan menguji berbagai opsi dengan fitur pratinjau waktu nyata plugin di penyesuai WordPress.

Untuk lebih banyak cara menyesuaikan tipografi situs web Anda seperti ukuran font, spasi huruf, dan tinggi baris, Anda dapat meningkatkan ke versi premium, Plugin Font Pro.Download | Demo | Hébergement Web

4. Google Font mudah

Google Font yang Mudah adalah salah satunya plugin WordPress terbaik untuk menyesuaikan tipografi situs web Anda. Seperti Plugin Font, ini memungkinkan Anda memilih dari ratusan Google Font dan mempratinjaunya di Customizer sebelum menambahkannya ke situs web Anda.

Meskipun menyediakan akses ke sejumlah kecil Google Font, ini unik karena memungkinkan Anda membuat kontrol dan aturan font khusus di area admin, yang akan segera muncul di penyesuai WordPress.

Download | Demo | Hébergement Web

Opsi 2 – Instal Font Kustom WordPress Secara Manual

Menggunakan @font-face directive, Anda dapat menghubungkan satu atau lebih font ke situs web Anda. Tetapi metode ini memiliki pro dan kontra.

manfaat:

• Berkat CSS, Anda dapat menghubungkan font dalam format apa pun: ttf, otf, woff, svg.
• File font akan ditempatkan di server Anda – Anda tidak akan bergantung pada layanan pihak ketiga.

kerugian :

• Untuk koneksi font yang benar untuk setiap gaya, Anda harus mendaftarkan kode terpisah.
• Tanpa mengetahui CSS, Anda dapat dengan mudah bingung.

Tapi itu bukan masalah sebenarnya jika Anda bisa cukup salin kode yang sudah jadi dan di mana Anda perlu menentukan nilai Anda.

Ucapan : Sebelum Anda mulai, pastikan untuk buat tema anak untuk situs web Anda. Dengan cara ini Anda dapat membuat semua perubahan pada tema anak Anda, meninggalkan tema utama Anda sehingga Anda dapat dengan mudah memperbaruinya jika diperlukan di masa mendatang.

Langkah 1: Buat folder "font"

Di tema anak Anda, buat folder "font" baru di bawah: wp-content/themes/your-child-theme/fonts

Langkah 2. Unggah file font yang diunduh ke situs web Anda

Ini dapat dilakukan melalui panel kontrol hosting Anda atau melalui FTP.

Tambahkan semua file font ke folder font yang baru ditambahkan: wp-content/themes/ Di tema anak Anda, buat folder "font" baru di bawah: wp-content/themes/your-child-theme/fonts yang Anda buat.

Langkah 3. Impor font melalui lembar gaya tema anak

Buka file style.css tema anak Anda dan tambahkan kode berikut di awal file CSS (setelah komentar tema anak):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

dimana Font Web Saya adalah nama font dan nilai properti src (data dalam tanda kurung dalam tanda kutip) adalah lokasinya (tautan relatif). Kita perlu menentukan setiap gaya secara terpisah.

Karena kami menghubungkan gaya normal terlebih dahulu, kami mengatur properti font-weight dan font-style menjadi normal.

Langkah 4. Saat menambahkan huruf miring, tulis berikut ini:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Ketika semuanya sama, kami adalah satu-satunya yang melampirkan properti gaya font menjadi miring.

Langkah 5. Untuk menambahkan font tebal, tambahkan kode berikut:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Di mana kita mengatur properti font-weight menjadi bold.

Ingatlah untuk menentukan lokasi yang benar dari file font untuk setiap gaya.

Langkah 6. Untuk menghubungkan huruf miring tebal, ketik berikut ini:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Nah, itu saja. Sekarang Anda telah menghubungkan empat gaya font ke situs web Anda.

Tetapi ada satu catatan: koneksi font ini tidak akan ditampilkan dengan benar di Internet Explorer 8. Penghiburannya adalah bahwa sangat sedikit orang yang masih menggunakan IE8.

Sumber daya lain yang direkomendasikan

Kami juga mengundang Anda untuk berkonsultasi dengan sumber daya di bawah ini untuk melangkah lebih jauh dalam cengkeraman dan kontrol situs web dan blog Anda.

• 10 plugin akordeon WordPress untuk situs web
• Cara Menambahkan Banyak Kolom di WordPress
• Beberapa plugin untuk mengintegrasikan layanan Google di blog Anda
• Plugin 5 WordPress untuk menampilkan notifikasi
• Menggunakan latar belakang yang berbeda WordPress

Kesimpulan

Apa hal pertama yang diperhatikan pengguna ketika mereka mengunjungi situs web Anda? Itu benar, desainnya! Sebagian besar desain bergantung pada penggunaan font yang indah dengan tepat. Jadi, Anda perlu menjaga desain font situs web Anda. Tambahkan kode atau gunakan salah satu plugin yang disebutkan di atas untuk menyematkan gaya font baru. Bagaimana Anda memilih itu terserah Anda.

Pastikan Anda tidak menggunakan lebih dari dua font di situs web yang sama. Karena semakin banyak font khusus yang Anda tambahkan ke situs web, semakin banyak kecepatan situs web akan turun.

Itu saja untuk artikel ini yang menunjukkan kepada Anda cara menambahkan font khusus ke situs web WordPress. Kami mengundang Anda untuk mencoba. Jika Anda memiliki masalah atau saran, beri tahu kami di dalam komentar.

Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.

Sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.   

...