Cara Menambah Font Custom di WordPress

Adakah anda mahu menambahkan fon tersuai di WordPress? Fon khusus membolehkan anda menggunakan kombinasi fon yang berbeza di laman web anda untuk meningkatkan tipografi dan pengalaman pengguna.


Selain kelihatan cantik, fon khusus juga dapat membantu anda meningkatkan keterbacaan, membuat imej jenama, dan meningkatkan masa yang dihabiskan pengguna di laman web anda.

Dalam artikel ini, kami akan menunjukkan kepada anda cara menambahkan fon khusus di WordPress menggunakan kaedah Google Font, TypeKit, dan CSS3 @ Font-Face.

Menambah fon khas di WordPress

Nota: Memuatkan terlalu banyak fon boleh melambatkan laman web anda. Kami mengesyorkan memilih dua fon dan menggunakannya di laman web anda. Kami juga akan menunjukkan kepada anda cara memuatnya dengan betul tanpa melambatkan laman web anda.

Sebelum kita melihat cara menambahkan fon khusus di WordPress, mari kita lihat mencari fon khusus yang boleh anda gunakan.

Cara Mencari Fon Custom untuk Digunakan di WordPress

Fon dulu mahal, tetapi tidak lagi. Terdapat banyak tempat untuk mencari fon web percuma yang hebat seperti Font Google, Typekit, FontSquirrel, dan fonts.com.

Sekiranya anda tidak tahu cara mencampur dan memadankan fon, cuba Font Pair. Ini membantu pereka menyatukan fon Google yang indah.

Semasa anda memilih fon anda, ingatlah bahawa menggunakan terlalu banyak fon tersuai akan melambatkan laman web anda. Inilah sebabnya mengapa anda harus memilih dua fon dan menggunakannya sepanjang reka bentuk anda. Ini juga akan memberi kesesuaian pada reka bentuk anda.

Tutorial Video

Langgan WPBeginner

Sekiranya anda tidak menyukai video atau lebih suka panduan bertulis, teruskan membaca.

Menambah Font Custom di WordPress dari Google Font

Pratonton Font Google

Font Google adalah pustaka fon terbesar, percuma, dan paling biasa digunakan di kalangan pembangun laman web. Terdapat banyak cara untuk menambah dan menggunakan Google Font di WordPress.

Kaedah 1: Menambah Font Custom Menggunakan Plugin Font Google Mudah

Sekiranya anda ingin menambahkan dan menggunakan Google Font di laman web anda, maka kaedah ini adalah yang paling mudah dan disyorkan untuk pemula.

Perkara pertama yang perlu anda lakukan ialah memasang dan mengaktifkan plugin Font Google Mudah. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

Setelah diaktifkan, anda boleh pergi ke Penampilan »Penyesuai halaman. Ini akan membuka antara muka penyesuai tema langsung di mana anda akan melihat bahagian Tipografi baru.

Tipografi penyesuai

Mengklik Tipografi akan menunjukkan bahagian yang berbeza di laman web anda di mana anda boleh menggunakan Google Font. Cukup klik pada ‘Edit Font’ di bawah bahagian yang ingin anda edit.

Tetapan tipografi

Di bawah bahagian keluarga fon, anda boleh memilih Font Google yang ingin anda gunakan di laman web anda. Anda juga boleh memilih gaya fon, ukuran fon, padding, margin, dan lain-lain.

Bergantung pada tema anda, jumlah bahagian di sini mungkin terhad dan anda mungkin tidak dapat mengubah pemilihan fon secara langsung untuk pelbagai bidang di laman web anda.

Untuk memperbaikinya, plugin ini juga membolehkan anda membuat kawalan anda sendiri dan menggunakannya untuk menukar fon di laman web anda.

Pertama, anda perlu melawat Tetapan »Fon Google halaman dan berikan nama untuk kawalan fon anda. Gunakan sesuatu yang membantu anda memahami dengan cepat di mana anda akan menggunakan kawalan fon ini.

Bahagian kawalan fon

Seterusnya, klik pada butang ‘Buat kawalan fon’ dan kemudian anda akan diminta memasukkan pemilih CSS.

Anda boleh menambahkan elemen HTML yang ingin anda sasarkan (misalnya, h1, h2, p, blockquote) atau menggunakan kelas CSS.

Anda boleh menggunakan alat Inspect di penyemak imbas anda untuk mengetahui kelas CSS mana yang digunakan oleh kawasan tertentu yang ingin anda ubah.

Tambahkan pemilih CSS

Sekarang klik pada butang ‘Simpan kawalan fon’ untuk menyimpan tetapan anda. Anda boleh membuat seberapa banyak pengawal fon yang anda perlukan untuk pelbagai bahagian laman web anda.

Untuk menggunakan pengawal fon ini, anda perlu pergi ke Penampilan »Penyesuai dan klik pada tab Tipografi.

Di bawah Tipografi, anda sekarang akan melihat Pilihan ‘Tipografi Tema’ juga. Mengkliknya akan menunjukkan kawalan fon tersuai yang anda buat sebelumnya. Anda sekarang hanya boleh klik pada butang edit untuk memilih fon dan penampilan untuk kawalan ini.

Pilihan tipografi tema

Jangan lupa untuk mengklik butang simpan atau terbitkan untuk menyimpan perubahan anda.

Kaedah 2: Tambah Fon Google secara manual di WordPress

Kaedah ini menghendaki anda menambahkan kod ke fail tema WordPress anda. Sekiranya anda belum melakukannya, lihat panduan kami mengenai cara menyalin dan menampal kod di WordPress.

Pertama, lawati pustaka fon Google dan pilih fon yang anda mahu gunakan. Seterusnya, klik pada butang penggunaan pantas di bawah fon.

Pilih gaya fon yang ingin anda gunakan

Di halaman fon, anda akan melihat gaya yang tersedia untuk fon tersebut. Pilih gaya yang anda mahu gunakan dalam projek anda dan kemudian klik pada butang bar sisi di bahagian atas.

Dapatkan pautan sematkan fon

Seterusnya, anda perlu beralih ke tab ‘Benamkan’ di bar sisi untuk menyalin kod embed.

Terdapat dua cara untuk menambahkan kod ini ke laman WordPress anda.

Pertama, anda boleh mengedit fail header.php tema anda dan menampal kodnya sebelum teg.

Namun, jika anda tidak biasa dengan pengeditan kod di WordPress, maka anda boleh menggunakan pemalam untuk menambahkan kod ini.

Cukup pasang dan aktifkan plugin Insert Headers and Footers. Untuk maklumat lebih lanjut, lihat panduan langkah demi langkah kami mengenai cara memasang pemalam WordPress.

Setelah pengaktifan, pergi ke Tetapan »Masukkan Header dan Footer halaman dan tampal kod benam di kotak ‘Skrip dalam tajuk’.

Tambahkan kod fon ke laman WordPress anda

Jangan lupa untuk mengklik butang Simpan untuk menyimpan perubahan anda. Plugin sekarang akan mula memuatkan kod benam Font Google di semua halaman laman web anda.

Anda boleh menggunakan fon ini di lembaran gaya tema anda seperti ini:

.tajuk laman web h1 {
font-family: ‘Open Sans’, Arial, sans-serif;
}

Untuk arahan yang lebih terperinci, lihat panduan kami mengenai cara menambahkan fon Google dalam tema WordPress.

Menambah Font Custom di WordPress Menggunakan Typekit

Fon Adobe Typekit

Typekit by Adobe Fonts adalah sumber percuma dan premium lain untuk fon hebat yang boleh anda gunakan dalam projek reka bentuk anda. Mereka mempunyai langganan berbayar dan juga pelan percuma terhad yang boleh anda gunakan.

Cukup mendaftar untuk akaun Adobe Font dan lawati bahagian fon carian. Dari sini anda perlu mengklik butang untuk memilih fon dan membuat projek.

Tambahkan fon typekit ke projek

Seterusnya, anda akan melihat kod penyisipan dengan ID projek anda. Ini juga akan menunjukkan kepada anda cara menggunakan fon di CSS tema anda.

Anda perlu menyalin dan menempelkan kod ini di bahagian laman web anda.

Kod benam fon typekit

Terdapat dua cara untuk menambahkan kod ini ke laman WordPress anda.

Pertama, anda boleh mengedit fail header.php tema anda dan menampal kodnya sebelum teg.

Namun, jika anda tidak biasa dengan pengeditan kod di WordPress, maka anda boleh menggunakan pemalam untuk menambahkan kod ini.

Cukup pasang dan aktifkan plugin Insert Headers and Footers.

Setelah pengaktifan, pergi ke Tetapan »Masukkan Header dan Footer halaman dan tampal kod benam di kotak ‘Skrip dalam tajuk’.

Menambah Typekit oleh Adobe Font di WordPress

Itu sahaja, anda kini boleh menggunakan fon Typekit yang anda pilih dalam helaian gaya tema WordPress anda seperti ini:

h1. laman web-tajuk {
font-keluarga: gilbert, sans-serif;
}

Untuk arahan yang lebih terperinci, lihat tutorial kami bagaimana menambahkan tipografi hebat di WordPress menggunakan Typekit.

Menambah Font Custom di WordPress Menggunakan CSS3 @ font-face

Cara paling tepat untuk menambahkan fon khusus di WordPress adalah dengan menambahkan fon menggunakan kaedah CSS3 @ font-face. Kaedah ini membolehkan anda menggunakan fon yang anda suka di laman web anda.

Perkara pertama yang perlu anda lakukan ialah memuat turun fon yang anda suka dalam format web. Sekiranya anda tidak mempunyai format web untuk fon anda, maka anda boleh menukarnya menggunakan penjana FontSquirrel Webfont.

Sebaik sahaja anda mempunyai fail webfont, anda perlu memuat naiknya di pelayan hosting WordPress anda.

Tempat terbaik untuk memuat naik fon adalah di dalam folder “fon” baru di direktori tema atau tema anak anda.

Anda boleh menggunakan FTP atau Pengurus Fail cPanel anda untuk memuat naik fon.

Setelah memuat naik fon, anda perlu memuatkan font di helaian gaya tema anda menggunakan peraturan CSS3 @ font-face seperti ini:

@ fon muka
fon-keluarga: Arvo;
src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf);
berat-font: normal;
}

Jangan lupa ganti font-keluarga dan URL anda sendiri.

Selepas itu, anda boleh menggunakan fon itu di mana sahaja dalam helaian gaya tema anda seperti ini:

.tajuk laman web h1 {
keluarga fon: "Arvo", Arial, sans-serif;
}

Memuatkan fon secara langsung menggunakan CSS3 @ font-face bukanlah penyelesaian terbaik. Sekiranya anda menggunakan fon dari Google Font atau Typekit, maka yang terbaik adalah menyajikan fon secara langsung dari pelayannya untuk prestasi yang optimum.

Itu sahaja, kami harap artikel ini membantu anda menambahkan fon tersuai di WordPress. Anda mungkin juga ingin melihat panduan kami mengenai cara menggunakan fon ikon di WordPress dan cara mengubah saiz fon di WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me