Cara Menambahkan Font Kustom ke Situs WordPress Anda
Mengapa membuat blog Anda membosankan dengan font standar? Biarkan blog Anda berbicara tentang kepribadian Anda yang bersemangat dan tema yang dicakupnya dengan berbagai font khusus. Font khusus adalah fitur bagus yang membuat blog Anda terlihat lebih baik daripada yang lain.
Jujur; Kami berdua menyukai blog dan situs web dengan sumber daya khusus. Mereka tidak hanya menghiasi situs web, tetapi juga membantu menarik pengguna ke kontennya. Namun, pemilihan font WordPress standar terbatas dan tergantung pada tema yang Anda gunakan. Kabar baiknya adalah Anda dapat menambahkannya secara manual atau dengan plugin khusus.
Dan inilah dua pertanyaan yang muncul: di mana mendapatkan font khusus untuk WordPress dan Cara memasang font khusus di situs WordPress Anda.
Mari kita cari tahu bersama.
Mengapa saya harus menggunakan font khusus?
Hari-hari berlalu ketika Times New Roman dan Georgia dianggap sebagai satu-satunya sumber untuk teks situs web. Dalam beberapa tahun terakhir, ruang font telah benar-benar berubah dengan munculnya font seperti Google Font 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 memberi 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 kustom yang tepat dan cara menggunakannya di situs WordPress Anda.
Pentingnya menggunakan font khusus
Mengapa mengubah font, indentasi antar kata, spasi baris, spasi huruf, atau saturasi font? Mungkin saja, beberapa penelitian menunjukkan bahwa Tipografi meningkatkan pemahaman membaca.
Banyak tergantung pada konstruksi air mancur. Pada tingkat sadar dan bawah sadar, setiap orang menilai konten situs web berdasarkan desain.
Desain font mempengaruhi pembaca, bahkan jika mereka tidak menyadarinya. Menyerah pada desain font berarti menyerah pada pengembangan itu sendiri! Suasana hati pembaca tergantung padanya. Font yang memudahkan membaca atau memaksa pengguna untuk meninggalkan halaman.
Semua browser web menyertakan kumpulan font default. Ini berarti bahwa jika font tidak ditentukan dalam CSS halaman, versi standar akan digunakan. Anda selalu dapat menggunakan font default, tetapi mereka memperumit pekerjaan pengguna. Jadi sangat penting untuk menggunakan font khusus. Jika tema Anda tidak memberi Anda opsi untuk mengubah font, banyak situs web dan alat dapat membantu.
Font alternatif Google
Banyak dari Anda tahu tentang font Google gratis. Ada banyak tempat di mana Anda dapat menemukan font yang bagus. Beberapa di antaranya gratis untuk penggunaan pribadi. Jika Anda membutuhkan penggunaan komersial, Anda memerlukan lisensi. Font Google dan font Adobe Edge gratis. Jadi mereka tidak unik. Dan ini bukan untuk kita.
Berikut adalah beberapa Lebih banyak sumber daya untuk menemukan font Untuk penggunaan gratis dan komersial:
TemplateMonster – Di situs web TemplateMonster Marketplace 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, mereka disajikan dalam SATU kit pengembangan web. Koleksi yang sangat besar dan kreatif. Untuk membantu Anda memilih, semua font disajikan dalam brosur atau bingkai. Setiap font disajikan dengan lisensi komersial juga.
MyFonts: MyFonts saat ini menawarkan pilihan font terbesar di dunia. Namun, harga di sini juga berada di segmen tertinggi. Jadi jika Anda memiliki anggaran yang ketat, itu mungkin bukan untuk Anda.
FontSpring: Fontspring menjual font elegan untuk penggunaan komersial. Tetapi di hampir semua rumah, 1-2 font gratis dapat digunakan untuk penggunaan pribadi. Juga, ada bagian terpisah dengan font gratis. Koleksinya bergetar. Tetapi Anda harus hati-hati meneliti informasi lisensi untuk font tertentu sebelum mengunduhnya.
Cufonts: Ini juga merupakan koleksi besar dari berbagai sumber. Pilih salah satu, dan Anda akan melihat halaman dengan informasi mendetail tentangnya. Ada banyak font gratis dan mereka dibagi menjadi beberapa bagian terpisah. Sistem Penyortiran pada CufonFonts cukup fleksibel dan nyaman. Selain itu, dukungan Webfont disertakan.
Dafont: koleksi 3.500 font gratis lainnya yang dapat diakses. Kebanyakan dari mereka dirancang untuk penggunaan pribadi saja. Fitur bagus dari DaFont adalah sistem kategori. Anda dapat memilih dari buku komik, video game, klasik, atau font bergaya seperti karakter Jepang.
Pilihan font sangat menarik karena semuanya cantik. Tetapi Anda tidak harus memilih banyak. Menggunakan tidak lebih dari dua sumber di situs. Maka tampilan dan nuansa situs web Anda akan konsisten. Setelah Anda memilih font Anda, pastikan untuk mengunduh file untuk setiap gaya yang akan Anda gunakan (normal, tebal, miring, dll.).
Sekarang setelah Anda memilih font yang tepat untuk situs web Anda, mari kita lihat cara menambahkannya.
Cara Menambahkan Font Kustom ke WordPress
Ada beberapa cara untuk menambahkan font ke situs WordPress:
- Tambahan– Dalam hal ini, berbagai plugin WordPress digunakan untuk memfasilitasi proses.
- Dengan tangan: Dengan metode ini, Anda perlu mengunggah font yang diunduh ke situs web dan mengedit file CSS.
- Tema– Banyak tema populer menyertakan opsi bawaan untuk menyesuaikan font Anda (catatan: kami tidak akan menyertakan opsi ini karena prosesnya akan bervariasi tergantung pada tema yang Anda gunakan, tetapi tema premium Kualitas seperti tema Total WordPress akan disediakan dengan dokumentasi online yang dapat Anda ikuti dengan mudah, seperti panduan ini untuk menambahkan font khusus ke Total)
Opsi 1: ubah font WordPress dengan plugin
Jika kami tidak peduli dengan perubahan global, kami dapat menginstal plugin WordPress yang akan mengubah font di situs Anda.
Fitur plugin font khusus
Software open source memiliki keunggulan untuk kepentingan komunitas, dan WordPress juga memiliki keunggulan ini. Berbagai plugin WordPress memungkinkan Anda menambahkan font khusus. Bagaimana memilih suplemen yang cocok untuk begitu banyak orang? Apa karakteristik plugin font khusus?
Berikut beberapa poin yang perlu diperhatikan:
- Kemampuan untuk menggunakan font khusus
- Kemampuan untuk menggunakan lebih dari satu sumber.
- Komponen Target dan Header
- Bonus: kemampuan untuk mengubah pengaturan font dari editor visual
Itu semuanya. Fitur pertama dalam daftar sangat penting. Anda selalu dapat mengunduh font dari situs seperti DaFont, Font Squirrel, dll., tetapi Anda dapat mengunggahnya ke WordPress.
Mari kita lihat beberapa plugin WordPress yang memungkinkan Anda memuat font khusus.
Pemuat font khusus
Plugin ini memungkinkan Anda mengunduh font Google dan menerapkannya ke berbagai elemen blog Anda. Misalnya untuk judul atau badan postingan atau halaman.
Gunakan font apa saja
Ini adalah plugin WordPress yang memberi Anda antarmuka yang nyaman untuk mengunduh font dan menggunakannya langsung melalui editor visual. Editor visual WordPress dapat secara otomatis mengubah font teks apa pun. Plugin ini menawarkan beberapa fitur, membuat proses penambahan font kustom jauh lebih mudah dikelola.
Font WP Google
WP Google Fonts memungkinkan Anda untuk menggunakan Direktori Font Google. Salah satu manfaat luar biasa dari plugin ini adalah penambahan hampir 1000 font Google. Meskipun Anda dapat mengantri font Google secara manual, jauh lebih mudah menggunakan plugin untuk sebagian besar pengguna.
Bagaimana cara menginstal font dengan plugin?
Ambil contoh WP Google Font. Cukup instal plugin ini dari repositori resmi WordPress dan buka bagian Google Fonts.
Anda akan melihat panel Google Fonts di sini. Pilih font dan ubah berbagai pengaturan seperti gaya font, elemen yang diterapkan, dll.
Opsi 2 – Instal Font WordPress Kustom Secara Manual
Melalui @font-face directive, Anda dapat menghubungkan satu atau lebih font ke situs web Anda. Tetapi metode ini memiliki pro dan kontra.
kelebihan:
- Melalui CSS Anda dapat menghubungkan font dalam format apa pun: ttf, otf, woff, svg.
- File font akan ditempatkan di server Anda; tidak akan bergantung pada layanan pihak ketiga.
Cacat:
- Untuk mencocokkan font dengan benar untuk setiap gaya, Anda harus mendaftarkan kode terpisah.
- Tanpa mengetahui CSS, mudah untuk menjadi bingung.
Tapi itu bukan masalah sebenarnya jika Anda bisa cukup salin kode yang sudah selesai dan di mana Anda perlu mendefinisikan nilai-nilai Anda.
Catatan: Sebelum Anda mulai, pastikan untuk membuat tema anak untuk situs Anda. Dengan cara ini, Anda dapat membuat semua pengeditan pada tema anak Anda, menjaga tema inti Anda tetap utuh sehingga Anda dapat dengan mudah memperbaruinya sesuai kebutuhan di masa mendatang.
Langkah 1: buat folder “sumber”
Di tema anak Anda, buat folder “font” baru di: wp-content / Themes / your-child-theme / font
Langkah 2. Unggah file font yang diunduh ke situs web Anda
Ini dapat dilakukan melalui panel kontrol akomodasi Anda atau melalui FTP.
Tambahkan semua file font ke folder font yang baru ditambahkan: wp-content / Themes / your-child-theme / font kamu buat
Langkah 3. Impor font melalui lembar gaya tema anak
Buka file style.css tema anak Anda dan tambahkan kode berikut di bagian atas 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;
}Di mana MyWebFont adalah nama sumber, dan nilai atribut src (data dalam tanda kurung dalam tanda kutip ganda) adalah posisinya (penghubung relatif). Kita perlu menentukan setiap gaya secara terpisah.
Karena kami menghubungkan gaya reguler untuk pertama kalinya, kami mengatur gaya font dan properti bobot menjadi normal.
Langkah 4. Dengan menambahkan huruf miring, Tulis sebagai berikut:
@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;
}Di mana semuanya sama, kami hanya memiringkan properti gaya font.
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 tepat dari file font untuk setiap gaya.
Langkah 6. Untuk menghubungkan huruf tebal dan miring sebagai berikut:
@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;
}Ya, itu saja. Anda sekarang telah menghubungkan empat gaya font ke situs web Anda.
Tapi satu komentar: koneksi font ini akan ditampilkan secara tidak benar di Internet Explorer 8. Penghiburannya adalah masih sangat sedikit orang yang menggunakan IE8.
Lengkapi Font WordPress Kustom
Apa hal pertama yang dilihat pengguna ketika mereka mengunjungi situs web Anda? Ya, desain Anda! Sebagian besar desain didasarkan pada penggunaan font yang indah dengan benar. Karena itu, Anda harus 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 pada halaman yang sama. Karena semakin banyak font khusus yang Anda tambahkan ke situs web Anda, semakin lambat situs tersebut.
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 Anda dapat menemukannya.
