Cara Custom Font WordPress Tanpa Plugin

Bagaimana Cara Menambahkan Font ke Situs WordPress Tanpa Plugin?

Ada banyak cara untuk membuat situs web WordPress Anda menarik, salah satunya adalah Anda dapat menambahkan font khusus ke situs web WordPress Anda. Saat Anda bekerja di WordPress tanpa menambahkan font khusus apa pun, ada beberapa font yang ditentukan sistem yang diterapkan ke situs web Anda. Namun, Anda dapat meningkatkan situs web Anda dengan menambahkan font khusus. 

Pada artikel ini, Anda akan belajar cara menambahkan font ke situs WordPress dan cara menggunakannya.

Di mana Mengunduh Font?

Banyak situs web di internet tersedia untuk mengunduh font. Tidak semua font gratis dan beberapa font memerlukan izin khusus dari penulis untuk digunakan. Namun, sebagian besar font terbuka untuk penggunaan pribadi dan Anda dapat menggunakannya dalam proyek Anda.

Beberapa situs web diberikan di bawah ini, dari mana Anda dapat mengunduh font.

1. Google Font
2. Tupai Font
3. font hindi
4. Font Web Tepi
5. Mengetik Guru

Mengonversi Font ke Format Ramah-Web

Tidak selalu browser web mana pun akan mendukung font khusus Anda. Itu sebabnya tidak akan. Font kustom harus diubah menjadi format yang kompatibel untuk browser web, hanya setelah itu font Anda akan berfungsi di semua browser.

Sebelum mengonversi font khusus, penting untuk mengetahui semua format yang tersedia –

• Open Type Fonts (OTF) – font web yang paling umum digunakan dan merupakan merek dagang terdaftar dari Microsoft. Format ini bekerja dengan baik dengan hampir semua browser utama.
• True Type Fonts (TTF) – Dikembangkan oleh Microsoft dan Apple pada tahun 1980. Banyak digunakan untuk Windows dan macOS.
• Web Open Font Format (WOFF) – Format yang banyak digunakan untuk halaman web dan direkomendasikan oleh World Wide Web Consortium (W3C).
• WOFF 2.0 – Dianggap sebagai pilihan yang lebih baik daripada WOFF 1.0 karena kemampuan kompresi yang lebih baik. Format ini tidak didukung oleh Safari dan Internet Explorer, tetapi berfungsi baik dengan Google Chrome, Firefox, atau Opera.
• Embedded OpenType Fonts (EOF) – Font OTF yang lebih ringkas, digunakan sebagai font yang disematkan pada halaman web. Semua browser utama mendukung EOF .

Jika Anda tidak yakin apakah font kustom Anda kompatibel dengan browser web atau tidak, Anda dapat mengonversinya ke font ramah web menggunakan alat pembuat font web.

Tambahkan Font Kustom ke WordPress secara Manual?

Menurut saya, lebih baik tidak menggunakan plugin pihak ketiga untuk menambahkan font khusus. Karena Anda akan tahu bahwa, jika jumlah plugin bertambah, maka Anda mungkin harus menghadapi banyak kesalahan. Itu sebabnya saya selalu memberi tahu pembaca saya bahwa jika Anda ingin melakukan beberapa modifikasi di WordPress, lakukan secara manual.

Proses langkah demi langkah untuk menambahkan font secara manual ke situs WordPress Anda –

1. Untuk menambahkan font secara manual, pertama-tama unduh font favorit Anda dari situs web yang diberikan di atas.
2. Unggah font yang diunduh ke folder wp-content/themes/active-theme-name/assets/fonts/ . Di sini active-theme-name berarti tema yang sedang aktif di situs WordPress Anda. 
3.  Buka Theme Editor dari Admin Dashboard dan tambahkan kode berikut ke file style.css. 

@ font-wajah {

font-family : Aguafina Script-Regular;

src : url (http://situsanda.com/wp-content/themes/twentynineteen/assets/custom-fonts/hello-stockholm.ttf) ;

font-berat : normal;

,

@font-face { font-family: Aguafina Script-Regular; src: url(http://situsanda.com/wp-content/themes/twentynineteen/assets/custom-fonts/hello-stockholm.ttf); font-berat: normal; ,

@font-wajah {
font-family: Aguafina Script-Regular;
src: url(http://yoursite.com/wp-content/themes/twentynineteen/assets/custom-fonts/hello-stockholm.ttf);
font-weight: normal;
,

4. Jangan lupa untuk memperbarui file setelah menempelkan kode.

Bagaimana cara menggunakan setelah menambahkan font?

Kode font-face memuat font khusus setiap kali pengunjung mengunjungi situs web Anda, meskipun Anda tidak menggunakan font khusus itu dengan elemen apa pun. Ini juga memengaruhi kecepatan situs web Anda dan meningkatkan waktu pemuatan halaman. 

Anda dapat mengambil bantuan Kelas CSS untuk menggunakan font kustom yang diinstal. misalnya. Saya ingin menerapkan font Anton-Regular ke semua judul H2, maka saya harus menulis kode berikut di file style.css. 

h2 {

font-family : "Anton-Regular" ; ,

h2 { font-family : "Anton-Regular"; ,

h2 {
font-family : "Anton-Regular"; ,

Anda juga dapat menetapkan font khusus ke elemen saat menulis konten menggunakan pembuat halaman (Editor Visual). Metode ini disebut Metode CSS Inline. 

misalnya. Saya sedang menulis paragraf dan ingin menetapkan font khusus yang saya unggah ke paragraf itu, maka kode saya dengan elemen paragraf akan menjadi seperti di bawah ini. 

< p style="warna:hijau; font-family:Anton-Regular;" > Isi paragraf saya di sini. ... < /p >

<p style="color:green; font-family:Anton-Regular;">Isi paragraf saya di sini. ... </p>

<p style="color:green; font-family:Anton-Regular;">Isi paragraf saya di sini. ... </p>

LIHAT JUGA: