Cara Menambahkan Font Kustom ke Situs WordPress Anda

Cara Menambahkan Font Kustom ke Situs WordPress Anda

Mengapa membuat blog Anda membosankan menggunakan font standar? Biarkan blog Anda berbicara tentang kepribadian Anda yang bersemangat dan topik yang Anda bahas dengan berbagai jenis font khusus. Fon khusus adalah fitur bagus yang memungkinkan blog Anda terlihat lebih disukai orang lain.


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

Dan di sini, dua pertanyaan muncul – tempat untuk mendapatkan font khusus untuk WordPress dan cara menginstal font khusus di situs WordPress Anda.

Ayo cari tahu.

 Mengapa Saya Harus Menggunakan Font Kustom?

Hari-hari berlalu ketika Times New Roman dan Georgia dianggap sebagai satu-satunya font untuk teks di situs web. Selama beberapa tahun terakhir, ruang font telah sepenuhnya berubah dengan munculnya font seperti Google Fonts dan lainnya.

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

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

Pentingnya Menggunakan Font Kustom

Mengapa mengubah font, indentasi di antara kata-kata, spasi baris, spasi huruf, atau saturasi font, Anda bertanya? Namun, beberapa penelitian membuktikan hal itu tipografi meningkatkan pemahaman membaca.

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

Desain font mempengaruhi pembaca, bahkan jika mereka tidak memperhatikannya. Meninggalkan desain font berarti mengabaikan pengembangan itu sendiri! Suasana hati pembaca tergantung padanya. Font tersebut memudahkan pembacaan atau memaksa pengguna untuk meninggalkan halaman.

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

Alternatif Font Google

Di mana Menemukan Font Kustom

Banyak dari Anda yang tahu tentang font Google gratis. Ada banyak situs di mana Anda dapat menemukan font yang indah. Beberapa dari mereka gratis untuk penggunaan pribadi. Jika Anda perlu untuk penggunaan komersial, maka Anda memerlukan lisensi. Google Fonts dan Adobe Edge Fonts gratis. Itu sebabnya mereka tidak begitu unik. Dan ini tidak cocok untuk kita.

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

  1. TemplateMonster – Di situs web marketplace TemplateMonster, Anda akan menemukan segalanya untuk Desain Web yang Anda butuhkan. Ada juga banyak font dan paket font untuk penggunaan pribadi dengan harga murah. Juga, mereka disajikan di ONE web development kit. Koleksinya sangat besar dan kreatif. Untuk membantu Anda memilih, semua font disajikan pada brosur atau bingkai. Setiap font juga diberikan lisensi komersial.
  2. MyFonts – MyFonts saat ini menawarkan pilihan font terbesar di dunia. Namun, harga di sini juga di segmen yang lebih tinggi. Jadi, jika Anda memiliki anggaran yang ketat, itu mungkin bukan untuk Anda.
  3. FontSpring – Fontspring menjual font mewah untuk penggunaan komersial. Tetapi di hampir semua keluarga 1-2 font gratis yang dapat digunakan untuk keperluan pribadi. Selain itu, ada bagian terpisah dengan font gratis. Koleksinya adalah vibran. Tetapi Anda harus hati-hati mempelajari informasi lisensi untuk font tertentu sebelum mengunduh.
  4. Cufonfonts – Ini juga merupakan koleksi luas font yang berbeda. Pilih apa saja, dan Anda akan melihat halaman dengan informasi terperinci tentangnya. Ada banyak font gratis, dan mereka dibagi menjadi beberapa bagian. Sistem penyortiran pada CufonFonts cukup fleksibel dan nyaman. Juga, dukungan Webfont juga disertakan.
  5. Dafont – Koleksi lain yang dapat diakses dari 3.500 font gratis. Sebagian besar dirancang hanya untuk penggunaan pribadi. Fitur bagus DaFont adalah sistem kategori. Anda dapat memilih font dalam gaya komik, video game, vintage, atau bergaya sebagai karakter Jepang.

Pilihan font sangat menggoda karena semuanya cantik. Tetapi Anda tidak harus memilih banyak. Menggunakan tidak lebih dari dua font di situs. Maka tampilan situs situs web Anda akan konsisten. Setelah memilih font, pastikan untuk mengunduh file untuk setiap gaya yang akan Anda gunakan (normal, tebal, miring, dll.).

Sekarang Anda telah memilih font yang sesuai untuk situs, 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, berbagai plugin WordPress digunakan untuk memfasilitasi proses.
  2. Secara manual: menggunakan metode ini, Anda perlu mengunggah font yang diunduh ke situs dan mengedit file CSS.
  3. Tema: banyak tema populer menyertakan opsi bawaan untuk menyesuaikan font Anda (perhatikan – kami tidak akan membahas opsi ini karena prosesnya akan bervariasi berdasarkan tema yang Anda gunakan, tetapi tema premium berkualitas seperti tema Total WordPress akan ditawarkan secara online dokumen yang dapat Anda ikuti dengan mudah – seperti panduan ini untuk menambahkan font khusus ke Total)

Opsi 1 – Ubah Font WordPress dengan Plugins

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

Karakteristik Plugin Font Kustom

Perangkat lunak open-source memiliki keunggulan untuk kepentingan komunitas, dan WordPress juga memiliki keunggulan ini. Beberapa plugin WordPress memungkinkan Anda untuk menambahkan font khusus. Bagaimana memilih plugin yang cocok dengan banyak? Apa saja fitur plugin font khusus?

Berikut adalah beberapa hal yang perlu diperhatikan:

  • Kemampuan untuk menggunakan font khusus
  • Kemampuan untuk menggunakan lebih dari satu font
  • Header dan Komponen Target
  • Bonus: kemampuan untuk mengubah pengaturan font dari editor visual

Itu saja. Fitur pertama dalam daftar ini sangat penting. Anda selalu dapat mengunduh font dari situs-situs seperti DaFont, Font Squirrel, dll., Tetapi Anda harus dapat mengunggahnya ke WordPress.

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

Pengunggah Font Ubahsuaian

Pengunggah Font Ubahsuaian

Plugin ini memungkinkan Anda untuk mengunduh font Google dan menerapkannya ke berbagai elemen blog Anda. Misalnya ke judul atau badan artikel atau halaman.

Gunakan Font Apa Saja

Gunakan Font Apa Saja

Ini adalah plugin WordPress yang memberi Anda antarmuka yang nyaman untuk mengunduh font dan menggunakannya secara langsung melalui editor visual. Editor visual WordPress dapat secara otomatis mengubah font teks apa pun. Plugin ini menawarkan beberapa fitur, yang membuat proses penambahan font khusus jauh lebih mudah dikelola.

WP Google Fonts

WP Google Fonts

WP Google Font memungkinkan Anda menggunakan katalog font Google. Salah satu manfaat luar biasa dari plugin ini adalah penambahan hampir 1000 font Google. Meskipun Anda dapat membuat font Google secara manual, jauh lebih mudah menggunakan plugin untuk sebagian besar pengguna.

Cara menginstal font dengan plugin?

Mari kita ambil, misalnya WP Google Fonts. Cukup instal plugin ini dari repositori WordPress resmi dan buka bagian Google Fonts.

WP Google Fonts

Anda akan melihat panel kontrol font Google di sini. Pilih font dan ubah berbagai pengaturan, seperti gaya font, elemen yang diterapkannya, dll.

Opsi 2 – Instal font khusus WordPress secara manual

Melalui arahan @ font-face, Anda dapat menghubungkan satu atau beberapa font ke situs Anda. Tetapi metode ini memiliki pro dan kontra.

Pro:

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

Cons:

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

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

Catatan: Sebelum memulai, pastikan untuk membuat tema anak untuk situs Anda. Dengan cara ini Anda dapat melakukan semua pengeditan untuk tema anak Anda, membiarkan tema inti Anda dalam kebijaksanaan sehingga Anda dapat dengan mudah memperbaruinya sesuai kebutuhan di masa depan.

Langkah 1: Buat folder “font”

Dalam 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 / your-child-theme / fonts kamu buat.

Langkah 3. Impor Font melalui stylesheet tema anak

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

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

Dimana MyWebFont adalah nama font, dan nilai properti src (data dalam tanda kurung) adalah lokasi mereka (tautan relatif). Kita perlu menentukan setiap gaya secara terpisah.

Sejak pertama kali menghubungkan gaya normal, kami mengatur properti font-weight dan font-style menjadi normal.

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

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

Di mana semuanya sama, hanya kami melampirkan properti font-style ke huruf miring.

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

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

Di mana kami mengatur properti font-weight menjadi tebal.

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

Langkah 6. Untuk menghubungkan huruf miring tebal ketikkan yang berikut:

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

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

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

Wrapping Up Custom Fonts untuk WordPress

Apa hal pertama yang diperhatikan pengguna ketika mereka mengunjungi situs Anda? Benar, desainnya! Sebagian besar desain bergantung pada penggunaan font yang indah. Jadi, Anda harus mengurus desain font situs Anda. Tambahkan kode atau gunakan salah satu plugin yang disebutkan di atas untuk menyematkan gaya font baru. Cara mana yang Anda pilih terserah Anda.

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

Itu saja, jangan ragu untuk berkomentar. 

Kami juga akan senang mendengar opsi mana yang Anda pilih untuk menambahkan font khusus ke situs web Anda dan di mana Anda menemukan font Anda.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map