Bagaimana cara menambahkan font khusus ke situs WordPress Anda

Mengapa blog Anda harus bosan dengan font biasa? Biarkan blog Anda berbicara tentang kepribadian langsung Anda dan topik yang dibahas dengan berbagai font khusus. Font khusus adalah fitur hebat yang membuat blog Anda lebih disukai orang lain.

Mari kita jujur; Kita semua menyukai blog dan situs web dengan sumber yang tepat. Mereka tidak hanya menghiasi situs, tetapi juga membantu memenangkan pengguna atas kontennya. Namun, pilihan font WordPress standar terbatas dan tergantung pada tema yang digunakan. Berita baiknya adalah Anda dapat menambahkannya secara manual atau dengan plugin khusus.

Dan inilah dua pertanyaan: Di mana saya bisa mendapatkan font khusus? untuk WordPress dan Cara menginstal font khusus di situs WordPress Anda.

Ayo cari tahu.

Mengapa saya perlu menggunakan font khusus?

Lewat sudah hari-hari ketika Times New Roman dan Georgia adalah satu-satunya sumber teks di situs. Dalam beberapa tahun terakhir, area font telah sepenuhnya berubah dengan diperkenalkannya font seperti Google Fonts dan lainnya.

Saat ini, ratusan font gratis, alat informasi dan pelatihan, dan sumber daya desain tersedia di Internet. Tidak seperti Adobe Illustrator, Photoshop, dan aplikasi klasik lainnya, WordPress tidak menawarkan kontrol font penuh secara default. Beberapa tema mendukung dan menggunakan font khusus.

Dalam posting ini, Anda akan belajar cara menemukan font khusus dengan benar dan menggunakannya di situs WordPress Anda.

Pentingnya menggunakan font khusus

Mengapa mengubah font, indentasi kata, spasi baris, spasi huruf, atau saturasi font? Namun, beberapa penelitian menunjukkan hal ini. Tipografi meningkatkan pemahaman membaca.

Banyak hal tergantung pada konstruksi sumur. Pada tingkat sadar dan tidak sadar, semua orang mengevaluasi konten situs web sesuai dengan desainnya.

Desain font mempengaruhi pembaca bahkan jika mereka tidak memperhatikan., Jika Anda mengabaikan desain font, Anda harus mengabaikan pengembangannya sendiri! Suasana hati pembaca tergantung padanya. Font memfasilitasi membaca atau memaksa pengguna untuk meninggalkan halaman.

Semua browser web berisi berbagai font standar. Ini berarti bahwa versi standar digunakan jika font tidak ditentukan dalam CSS halaman. Anda selalu dapat menggunakan font default, tetapi ini menyulitkan pekerjaan pengguna. Karena itu, penting untuk menggunakan font khusus. Jika topik Anda tidak memiliki pengaturan perubahan font, banyak situs web dan alat yang dapat membantu Anda.

Opsi font Google

Banyak dari Anda yang tahu font gratis dari Google. Ada banyak tempat lain di mana Anda dapat menemukan air mancur yang indah. Beberapa dari mereka gratis untuk penggunaan pribadi. Jika Anda membutuhkan penggunaan komersial, Anda memerlukan lisensi. Font Google dan font Adobe Edge gratis. Maka Anda tidak begitu unik. Dan itu tidak cocok untuk kita.

Ini ada beberapa sumber daya lain untuk menemukan font Untuk penggunaan gratis dan komersial:

1. TemplateMonster – Situs web TemplateMonster Marketplace memiliki semua yang Anda butuhkan untuk desain web. Ada juga banyak font dan paket font untuk penggunaan pribadi dengan biaya rendah. Mereka juga akan muncul di ONE suite pengembangan web. Koleksinya sangat besar dan kreatif. Untuk mendukung pemilihan, semua font muncul dalam brosur atau bingkai. Setiap font juga disajikan dengan lisensi komersial.

2. MyFonts: MyFonts saat ini menawarkan pilihan font terbesar di dunia. Harga di sini juga di segmen tertinggi. Jadi, jika anggaran Anda terbatas, mungkin bukan Anda.

3. FontSpring: FontSpring menjual font yang elegan untuk penggunaan komersial. Font gratis ditemukan di hampir setiap keluarga. 1-2 digunakan untuk keperluan pribadi. Ada juga area terpisah dengan font gratis. Koleksinya bergetar. Namun, Anda harus hati-hati mempelajari informasi lisensi untuk font tertentu sebelum mengunduhnya.

4. Cufonfonts – Ini juga koleksi lengkap berbagai font. Pilih satu dan Anda akan melihat halaman dengan informasi terperinci tentangnya. Ada banyak font gratis yang dibagi menjadi beberapa bagian. Sistem klasifikasi di CufonFonts sangat fleksibel dan praktis. Dukungan font web juga disertakan.

5. Dafont – Koleksi lain dari 3.500 Font Gratis tersedia. Kebanyakan dari mereka hanya untuk penggunaan pribadi. Fitur DaFont yang bagus adalah sistem kategori. Anda dapat memilih font dalam gaya komik, video game, font lama atau font bergaya seperti karakter Jepang.

Pilihan font sangat menggoda karena semuanya cantik. Tetapi Anda tidak harus memilih banyak. gunakan tidak lebih dari dua sumber di situsMaka tampilan situs Anda akan seragam. Setelah memilih font, unduh file untuk setiap format yang digunakan (normal, tebal, miring, dll.).

Setelah Anda memilih font yang tepat untuk situs ini, mari kita lihat bagaimana cara menambahkannya.

Bagaimana cara menambahkan font khusus ke WordPress

Ada beberapa cara untuk menambahkan font ke situs WordPress:

1. tambahan– Dalam hal ini, beberapa plugin WordPress digunakan untuk menyederhanakan proses.
2. Dengan tangan: Dengan metode ini, unggah font yang diunduh ke situs dan edit file CSS.
3. utas– Banyak tema populer termasuk opsi bawaan untuk mengkustomisasi font Anda (Catatan: opsi ini tidak dicakup karena prosesnya berbeda tergantung pada tema yang Anda gunakan. Namun, tema premium berkualitas tinggi seperti tema Total WordPress menyediakan dokumen online untuk Anda Anda dapat dengan mudah mengikuti, seperti dalam panduan ini tentang cara menambahkan font khusus ke Total)

Opsi 1: Ganti font WordPress dengan plugin

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

Fitur plugin font khusus

Perangkat lunak open source memiliki manfaat untuk kepentingan publik, dan WordPress juga memiliki manfaat itu. Dengan berbagai plugin WordPress, Anda dapat menambahkan font khusus. Bagaimana Anda memilih suplemen yang cocok dengan begitu banyak? Apa karakteristik plugin font khusus?

Berikut beberapa hal yang perlu dipertimbangkan:

• Kemampuan untuk menggunakan font khusus
• Kemungkinan menggunakan lebih dari satu sumber.
• Komponen dan header target
• Bonus: kemampuan untuk mengubah pengaturan font melalui editor visual

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

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

Pemuat font khusus

Plugin ini memungkinkan Anda untuk mengunduh font Google dan menerapkannya ke berbagai elemen blog Anda. Misalnya, tajuk utama atau isi artikel atau halaman.

Gunakan font apa saja

Ini adalah plugin WordPress yang memungkinkan Anda mengunduh font dengan mudah dan menggunakannya langsung melalui editor visual. Editor visual WordPress dapat secara otomatis mengubah font teks apa pun. Plugin ini menawarkan berbagai fitur yang membuat menambahkan font khusus lebih mudah.

WP Google Fonts

Dengan WP Google Fonts Anda dapat menggunakan direktori Google Fonts. Salah satu manfaat besar dari plugin ini adalah penambahan hampir 1.000 font Google. Meskipun Anda dapat secara manual membuat antrian font Google, menggunakan plugin jauh lebih mudah bagi sebagian besar pengguna.

Bagaimana cara saya menginstal font dengan plugin?

Ambil contoh. WP Google Fonts. Instal saja plugin ini dari file WordPress resmi dan buka area Google Fonts.

Di sini Anda dapat melihat panel Google Font. Pilih font dan ubah pengaturan berbeda seperti Font, elemen yang digunakan, dll.

Opsi 2 – Secara manual menginstal font WordPress khusus

Anda dapat menautkan satu atau lebih font ke situs Anda menggunakan petunjuk @ font-face. Namun, metode ini memiliki kelebihan dan kekurangan.

manfaat:: ::

• Dengan CSS Anda dapat menghubungkan font dalam format apa pun: ttf, otf, woff, svg.
• File font ada di server Anda. tidak tergantung pada layanan pihak ketiga.

kerugian:: ::

• Anda harus mendaftarkan kode terpisah untuk koneksi font yang benar untuk setiap gaya.
• Tanpa mengetahui CSS, itu bisa dengan mudah membingungkan.

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 Anda mulai, buat tema anak untuk situs Anda. Dengan cara ini, Anda dapat membuat perubahan pada tema anak Anda dan membiarkan tema inti Anda tetap utuh, sehingga Anda dapat dengan mudah memperbaruinya di masa depan jika perlu.

Langkah 1: Buat folder "Font"

Buat folder "Font" baru pada tema anak Anda di: konten / tema wp / tema anak Anda / font

Langkah 2, Unggah file font yang diunduh ke situs Anda

Ini dapat dilakukan melalui panel kontrol untuk Anda menginap atau melalui FTP.

Tambahkan semua file font ke folder font yang baru ditambahkan: wp konten / tema / tema anak Anda / font telah dibuat

langkah 3, Impor font menggunakan style sheet anak

Buka file style.css anak Anda dan tambahkan kode berikut ke bagian atas file CSS (setelah komentar anak itu):

@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 MyWebFont adalah nama sumber dan nilai properti src (data dalam tanda kurung dalam tanda kutip) adalah lokasinya (tautan relatif). Kita perlu menentukan setiap gaya secara terpisah.

Karena ini adalah pertama kalinya kami terhubung ke gaya normal, kami telah mengatur properti Weight dan Font menjadi normal.

langkah 4, saat Anda menambahkan miring, masukkan yang 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;
 }

Jika semuanya sama, properti "Font" ditulis hanya dalam huruf miring.

Langkah 5, Untuk menambahkan tipe 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 kami mengatur properti font weight menjadi tebal.

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

Langkah 6, Untuk menghubungkan huruf tebal dan miring, masukkan:

@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;
 }

Itu dia. Anda sekarang telah menautkan empat sumber ke situs Anda.

Namun, ada komentar: tautan font ini yang ditemukan di Internet Explorer 8 ditampilkan secara tidak benar. Penghiburannya adalah sangat sedikit pengguna yang masih menggunakan IE8.

Lengkapi font WordPress khusus

Apa yang pertama kali diperhatikan pengguna ketika mereka mengunjungi situs Anda? Benar, desain Anda! Sebagian besar desain didasarkan pada penggunaan font yang indah. Karena itu, Anda harus menjaga desain font situs Anda. Tambahkan kode atau gunakan salah satu plugin di atas untuk menyematkan font baru. Bagaimana Anda memilihnya, itu terserah Anda.

Pastikan untuk tidak menggunakan lebih dari dua sumber di tempat yang sama. Semakin banyak font khusus yang Anda tambahkan ke situs, semakin lambat kecepatan situs.

Itu saja, jangan ragu untuk berkomentar.

Kami juga akan senang mengetahui opsi mana yang Anda pilih untuk menambahkan font khusus ke situs Anda dan di mana menemukannya.