Menambah Font Custom ke WordPress


Cara menambah fon khas ke WordPress


Memilih fon yang sesuai untuk laman WordPress anda adalah bahagian tengah reka bentuk web dan penjenamaan laman web.

Seperti warna, gambar dan elemen lain, tipografi memainkan peranan besar bagaimana laman web anda dilihat oleh pelawat.

Syukurlah, fon WordPress adalah salah satu daripada banyak perkara yang boleh anda sesuaikan secara bebas. Anda boleh menggunakan hampir semua fon khas percuma di laman WordPress yang anda mahukan.

Kami akan merangkumi semua yang perlu anda ketahui mengenai fon WordPress:

  • A) Cara Menambah Font Custom ke WordPress (secara manual)
  • B) Cara Menambah Font Custom ke WordPress (melalui plugin)
  • Mengapa menggunakan Fon Tersuai di WordPress
  • Tempat Cari Fon Tersuai
  • Kesimpulannya

A) Cara Menambah Font Custom ke WordPress Secara Manual

Untuk menambah font khusus ke WordPress dengan tangan, anda mempunyai tiga pilihan utama: HTML, JavaScript, dan CSS. Terdapat kebaikan dan keburukan untuk setiap kaedah dan mana yang sesuai untuk anda bergantung pada persediaan anda. Jangan risau, kami akan membahas masing-masing secara terperinci.

1. Menggunakan CSS dan @import

Mari kita mulakan dengan kaedah yang paling tidak disyorkan. Sekiranya anda merancang untuk memasang jenis huruf tersuai dari Google Font, anda mungkin menyedari bahawa ia mempunyai tab berlabel @import. Perkhidmatan ini memberi anda sekeping kod CSS.

tab import dalam fon google

Anda boleh mengambilnya sebagaimana mestinya dan memasukkannya ke dalam tajuk anda (lebih banyak lagi di bawah) atau menyalinnya tanpa >tanda kurung hingga awal tema anda (atau lebih baik lagi, tema kanak-kanak) gaya.css fail.

/ *
Nama Tema: Dua Puluh Tujuh Belas Anak
URI Tema: https://wordpress.org/themes/twentyseventeen/
Templat: duapuluh belas
Pengarang: pasukan WordPress
URI pengarang: https://wordpress.org/
Versi: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * CSS tambahan ada di sini * /

Melakukannya akan memuatkan fon ke laman web anda dari helaian gaya. Nampaknya seperti penyelesaian mudah, bukan? Mengapa ia paling tidak disyorkan?

Sebabnya ialah masalah prestasi. Menggunakan @import bukan lagi kaedah yang disyorkan untuk digunakan kerana menghalang penyemak imbas memuat turun beberapa helaian gaya sekaligus. Akibatnya: masa pemuatan halaman lebih perlahan. Jauhkan daripadanya jika anda boleh.

2. Menggunakan Fail Templat WordPress

Kaedah kedua untuk mendapatkan fon di laman web anda adalah dengan mengambil kod yang disediakan oleh perpustakaan fon dan menyalinnya di dalam pengepala.php fail templat. Sebilangan besar tema WordPress standard memilikinya.

Pastikan meletakkannya di suatu tempat antara dan kurungan. Dengan cara itu, fon anda akan dimuat setiap kali halaman dimuat.

masukkan kod fon google ke header wordpress

Sekiranya anda menggunakan tema kanak-kanak, pastikan untuk menyalin tema ibu bapa pengepala.php fail ke dalam direktori tema kanak-kanak dan buat perubahan di sana.

Beberapa tema dilengkapi dengan tetapan yang membolehkan anda menambahkan kod tersuai ke header dan footer anda melalui backend. Ini juga merupakan pilihan yang sesuai.

3. Menggunakan @ fon muka

Setakat ini, kami hanya membincangkan cara menggunakan fon tersuai di WordPress yang dihoskan di tempat lain, iaitu pelayan Google dan Adobe. Walau bagaimanapun, ada kemungkinan untuk menghoskan fon di laman web anda sendiri dan menawarkannya kepada penyemak imbas pelawat dari sana.

Untuk melakukan ini, pertama sekali anda perlu memuat turun fon yang dimaksudkan. Ingat butang muat turun di Google Font? Yang akan menjadi berguna sekarang. Penyedia lain juga membolehkan anda memuat turun fon.

Apabila anda melakukannya, pastikan anda mendapatkannya dalam format fon web. Itu bermaksud TTF, OTF atau WOFF. Anda akan mendapat lebih banyak maklumat mengenainya di sini. Sekiranya anda tidak mempunyai format fon web yang betul, anda juga boleh menggunakan perkhidmatan ini untuk menukar fon anda menjadi fon yang disokong.

Setelah anda menyediakan fail fon anda, anda perlu memuat naiknya ke laman WordPress anda melalui FTP. Tempat yang baik untuk menyimpannya adalah dalam subdirektori tema anak anda yang dinamakan fon (kreatif, kita tahu).

Selepas itu, anda perlu memuatkan fon di helaian gaya anda melalui @ fon muka. Begini rupanya:

@ fon muka
font-keluarga: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
berat-font: normal;
}

Ingatlah untuk mengganti nama fon dan alamat untuk lokasinya di laman web anda sendiri. Selepas itu, fon khas baru anda akan dapat digunakan.

Walau bagaimanapun, ini juga bukan penyelesaian terbaik, terutamanya berdasarkan prestasi. Pelayan Google mungkin lebih pantas daripada anda dan oleh itu memuatkan fon tersuai dari sana mungkin penyelesaian yang lebih baik.

4. Enqueueing Font - "Cara WordPress"

Sekiranya anda benar-benar ingin menambahkan fon khusus ke WordPress dengan cara yang betul, anda akan menggunakan fon anda fungsi.php fail (di dalam direktori tema aktif anda) dan fungsinya  wp_enqueue_script atau wp_enqueue_style.

Dengan bantuan mereka, kami dapat mengambil potongan kod yang disediakan oleh laman fon. Namun, daripada menyalinnya ke dalam fail, kami akan menambahkannya ke tajuk melalui fungsi.

Apa perbezaan antara wp_enqueue_script dan wp_enqueue_style? Seperti namanya, satu untuk menambah skrip, satu untuk helaian gaya. Mana yang betul digunakan bergantung pada bagaimana fon tersuai anda disediakan dari sumbernya.

Contohnya, Fon Google memberikan fon sebagai helaian gaya. Sekiranya demikian, anda akan menambahkannya ke laman WordPress anda dengan cara ini:

fungsi add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Berbeza dengan itu, fon dari Adobe Edge Web Font datang sebagai JavaScript. Oleh itu, untuk memasukkannya di laman web anda, kodnya akan kelihatan seperti ini:

fungsi add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Tidak begitu sukar, bukan? Selain itu, anda mendapat mata tambahan untuk melakukannya dengan cara WordPress.

5. Panggil Font Custom dalam Helaian Gaya Anda

Sekarang fon telah ditambahkan ke laman web anda, anda boleh menggunakannya secara rasmi. Untuk melakukannya, yang tinggal hanyalah menambahkan deklarasi untuk fon baru di helaian gaya anda. Contohnya, untuk menukar fon untuk tag tajuk anda, anda akan menggunakan sesuatu seperti ini:

h1,
h2,
h3,
h4,
h5,
h6 {
font-keluarga: 'Roboto';
}

Nota: Perhatikan bagaimana perkhidmatan yang anda gunakan menentukan deklarasi CSS untuk fon anda. Di laman web ujian kami, kami nampaknya tidak dapat membuat Adobe Edge Web Font berfungsi kerana mereka memanggil Open Sans dalam CSS dengan terbuka yang bertentangan dengan 'Terbuka Sans' dalam Fon Google.

Itu sahaja. Anda kini tahu cara menambahkan fon khusus ke WordPress secara manual. Tahniah kepada diri sendiri, ini adalah beberapa pengetahuan peringkat seterusnya! Jelas, tindakan yang sama mungkin dilakukan melalui pemalam. Itulah yang akan kita bincangkan seterusnya.

B) Cara Menambah Font Custom ke WordPress melalui Plugin

Sphere WordPress tidak akan menjadi seperti itu jika tidak ada beberapa penyelesaian pemalam untuk menambahkan fon khusus ke platform. Kami akan membincangkan cara penggunaannya Fon Google Mudah, yang merupakan salah satu pemalam yang paling popular di kawasan ini.

1. Pasang Pemalam

Langkah pertama ialah memasang pemalam. Untuk melakukannya, teruskan ke Pemalam> Pasang Baru. Kemudian, cari nama pemalam. Dalam hasil carian, klik pada Install sekarang dan aktifkan pemalam setelah berada di laman web anda.

2. Tambah / Tukar Fon di Laman Web anda

Apabila pemalam aktif, anda akan menemui item menu baru yang dipanggil Tipografi bawah Rupa> Sesuaikan.

menu tipografi dalam penyesuai wordpress

Apabila anda mengkliknya dan memilih Tipografi Lalai, anda dapati senarai kawalan untuk menukar fon perenggan dan tajuk anda.

tetapan fon google yang mudah di penyesuai wordpress

Menggunakannya sangat mudah. Cukup klik pada menu lungsur di mana tertera Edit Fon untuk bahagian laman web anda, anda mahu menukarnya. Ini memberi anda akses ke menu ini:

fon google mudah menukar fon

Di sini, bahagian yang paling penting adalah bahagian di bawah Keluarga Font. Di sini, anda boleh memilih jenis fon baru dari keseluruhan pustaka Font Google (gunakan Skrip / Subset untuk menghadkan pilihan fon kepada mereka yang mempunyai watak khas).

Fon disusun mengikut fon standard, serif, sans-serif, display, tulisan tangan dan monospace. Walau bagaimanapun, anda juga boleh mencarinya dengan nama.

Apabila anda mengklik fon, anda boleh melihat perubahan dalam masa nyata di sebelah kanan.

menukar fon tersuai dalam fon google yang mudah

3. Konfigurasikan Fon

Setelah memilih fon, terdapat banyak pilihan untuk menyesuaikan tipografi anda dengan lebih jauh.

Pertama sekali, anda boleh menukar berat-gaya / gaya di bawah menu dengan nama yang sama. Ini mengawal ketebalan huruf.

Selanjutnya, di bawah Hiasan Teks, anda dapat menambahkan garis bawah, garis panduan dan garis besar. Transformasi Teks juga membolehkan anda menetapkannya ke semua huruf besar, semua huruf kecil atau menggunakan huruf besar setiap huruf pertama. Di bawah Penampilan tab di atas, anda juga dapat mengawal warna font, warna latar belakang, ukuran font, ketinggian garis, dan jarak huruf.

tetapan penampilan dalam fon google yang mudah

Akhirnya, Kedudukan membolehkan anda mengubah tetapan lain seperti margin, padding, border, border-radius, dan display.

tetapan kedudukan dalam fon google yang mudah

Ringkasnya, anda seharusnya dapat menyesuaikan fon di laman web anda mengikut kehendak anda. Mudah, bukan? Jangan lupa untuk memukul Simpan & Terbitkan di bahagian atas apabila anda berpuas hati dengan perubahan anda.

Itu Tidak Berfungsi, Apa Yang Perlu Saya Lakukan?

Kadang kala anda tidak dapat mengubah beberapa fon di laman web anda. Itu biasanya berlaku apabila tema yang anda gunakan dilengkapi dengan kelas CSS dan pemilih yang tidak standard untuk menggayakannya.

Sebagai contoh, dalam tema Dua Puluh Enam Belas, tajuk catatan blog tidak hanya ditakrifkan sebagai H1 tetapi juga mempunyai kelas CSS yang disebut .tajuk kemasukan. Atas sebab itu, pemalam tidak dapat mengubahnya.

Untuk mengatasi masalah ini, anda perlu membuat apa yang disebut kawalan fon bawah Tetapan> Fon Google.

tambah kawalan fon dalam fon google yang mudah

Anda boleh mengaitkan pemilih CSS dengan kawalan baru dan penggantian kekuatan apabila perlu. Setelah anda melakukannya, kawalan fon baru tersedia sebagai pilihan tambahan di WordPress Customizer di bawah Tipografi Tema. Senang kacang.

Plugin Font Peribahasa Lain

Terdapat juga plugin WordPress lain yang tersedia untuk menambahkan fon tersuai:

  • Gunakan Apa-apa Fon - Ini membantu anda menggunakan fon yang dimuat naik tanpa CSS. Ini menempatkan fon di pelayan anda sendiri dan juga menawarkan alat penukaran untuk format fon.
  • Font Typekit untuk WordPress - Gunakan fon dari Adobe Typekit perkhidmatan (yang anda perlukan untuk mendaftar). Ini membolehkan anda memasukkan kod embed dan CSS tersuai secara langsung dalam pemalam.
  • Fon Google TK - Penyelesaian alternatif untuk menyematkan fon Google yang banyak menggerakkan pengalaman Google Font ke backend WordPress. Cubalah fon dengan pratonton dan teks tersuai, kemudian ubah di dalam Penyesuai WordPress.

Mengapa Menggunakan Fon Tersuai di Laman Web WordPress Anda?

Tipografi adalah sains dengan sendirinya dan kami tidak akan dapat memberikan anda kursus lengkap mengenai penggunaan fon dalam reka bentuk web di sini. Lagipun, ini bukan hanya mengenai fon tetapi juga ukurannya, miring, tebal, dan banyak perkara lain. Walau bagaimanapun, kami boleh lindungi mengapa menggunakan fon khas di laman WordPress anda adalah idea yang baik.

1. Tipografi adalah Bahagian Kesan Pertama

Pertama sekali, fon yang anda gunakan banyak mempengaruhi bagaimana laman web anda dirasakan. Adakah laman web anda menyeronokkan dan suka bermain? Adakah anda seorang profesional perniagaan? Pengunjung memutuskan ini dalam satu pandangan dan tipografi anda memainkan peranan besar dalam persepsi mereka.

2. Font Mempengaruhi Lebih Banyak Daripada Yang Anda Fikirkan

Ini boleh mempengaruhi kemampuan anda untuk belajar, menghafal teks, dan bahkan mempengaruhi mood anda.

Contohnya, dalam satu penyelidikan, diperhatikan bahawa jika anda ingin meningkatkan masa yang dihabiskan untuk membaca beberapa teks, anda harus menggunakan font serif. Walau bagaimanapun, jika anda ingin membaca lebih banyak dalam masa yang singkat, anda harus beralih ke fon sans-serif.

Kajian lain menunjukkan kepada orang-orang arahan latihan yang sama di pelbagai jenis huruf. Mereka kemudian meminta peserta untuk mengira berapa lama masa yang diperlukan untuk menyelesaikan arahan tersebut. Menariknya, mereka yang mempunyai fon yang lebih rumit menebak akan memakan masa lebih lama daripada kumpulan dengan fon yang lebih sederhana. Akibatnya, mereka cenderung mengikuti rutin latihan.

Tempat Cari Fon Tersuai

1. Gunakan Font Google untuk Mencari Tipografi Tersuai

Perkhidmatan pertama yang akan kita perhatikan adalah Fon Google. Seperti namanya, ini adalah perkhidmatan oleh Google yang menawarkan 800+ fon berbeza. Percuma untuk digunakan. Untuk semua orang.

Inilah cara menggunakannya:

2. Cari Fon yang Betul

Semasa pertama kali pergi ke halaman Font Google (masukkan sahaja ke Carian Google), inilah yang akan anda lihat:

cara menambah fon tersuai di laman utama fon google wordpress

Antara muka pengguna dibuat untuk membantu anda mencari fon yang sesuai untuk tujuan anda. Sekiranya anda sudah mempunyai fon, anda boleh memasukkan namanya ke dalam bidang carian di sebelah kanan.

Sekiranya tidak, anda boleh menyaring fon dengan pelbagai cara, misalnya, mengikut kategori:

  • Serif - Maksud fon dengan garis berlekuk pada akhir, seperti Times New Roman.
  • Sans-Serif - Fon ringkas tanpa coretan, seperti Helvetica. Fon yang digunakan di laman web ini adalah contohnya.
  • Paparan - Jenis huruf yang boleh digunakan dalam ukuran yang lebih besar seperti tajuk utama.
  • Tulisan Tangan - Adakah anda mahu tipografi anda kelihatan seperti tulisan tangan? Maka ini adalah tetapan anda.
  • Monospace - Tipografi di mana semua watak menempati ruang yang sama, seperti ini.

Penapis lain termasuk:

  • Menyusun - Isih fon selepas tren, popular, tarikh ditambahkan atau mengikut abjad.
  • Bahasa -Hadkan pilihan fon anda kepada bahasa yang tidak ditulis dalam abjad Latin seperti Arab, Thai atau Vietnam.
  • Sejumlah gaya -Pilih berapa banyak gaya yang anda perlukan, yang bermaksud sama ada fon tersedia dalam ketebalan yang berbeza, miring, tebal dan banyak lagi.
  • Ketebalan - Pilih tebal fon anda.
  • Celah - Sama dengan ketebalan tetapi untuk condong. Ia berkisar dari lurus hingga hampir mendatar.
  • Lebar - Tapis fon dengan lebar huruf dan jaraknya.

Apabila anda menggunakan penapis, hasil carian anda akan disesuaikan dalam masa nyata. Di sebelah kiri, anda akan melihat fon yang tersedia dalam kategori dan contoh ayat anda.

Apabila anda mengarahkan kursor ke fon, anda dapat menggunakan menu tarik-turun di bahagian atas agar Google Font memaparkan perenggan contoh, keseluruhan abjad atau angka. Anda juga boleh hanya klik pada bidang ayat dan tulis apa sahaja yang anda mahukan.

edit teks contoh dalam fon google

Selain itu, ada pilihan untuk mengubah gaya dan ukuran fon. Apabila anda membuat perubahan, anda juga mendapat pilihan untuk menerapkannya pada semua hasil carian anda. Akhirnya, lihat halaman butiran fon dengan mengklik Lihat Spesimen.

halaman butiran fon dalam fon google

3. Tambahkan Font ke Koleksi Anda

Sekiranya anda menyukai fon tertentu, anda boleh menggunakan tanda tambah merah di sudut kanan atas untuk menambahkannya ke koleksi anda. Melakukannya akan membuka menu di bahagian bawah di mana anda melihat semua fon pilihan anda.

fon yang dipilih dalam fon google

Perhatikan bahawa anda boleh menambahkan lebih daripada satu keluarga fon. Ini masuk akal, misalnya, ketika anda memilih satu untuk salinan isi badan anda dan yang lain untuk tajuk.

4. Sesuaikan Tetapan Font

Setelah anda berpuas hati dengan koleksi anda, klik pada menu bawah. Melakukannya akan membuka skrin ini:

tetapan fon dalam fon google

Seperti yang anda lihat, anda boleh menemui beberapa kod untuk memasukkan dan menggunakan fon di laman web anda. Ini akan menjadi penting di kemudian hari. Buat masa ini, klik pada tab yang tertera Sesuaikan. Melakukannya membawa anda ke menu ini:

sesuaikan fon dalam fon google

Di sini, anda dapat memilih gaya fon yang dimaksudkan. Ini penting jika anda ingin menggunakan fon dalam pelbagai saiz, yang sering berlaku.

Namun, berhati-hatilah: semakin banyak gaya yang perlu dimuat oleh laman web anda, semakin lama semakin perlahan (Fon Google bahkan memberi anda petunjuk tentang kelajuan pemuatan untuk koleksi semasa anda di kanan atas). Oleh itu, fikirkan apa yang anda benar-benar perlukan dan pilih sahaja. Ngomong-ngomong, ada lebih banyak cara untuk mempercepat WordPress.

Sekiranya anda memerlukan bahasa lain daripada abjad Latin biasa, pastikan untuk memilihnya di bahagian bawah juga.

pilih bahasa fon dalam fon google

Selain itu, yang perlu anda ketahui adalah dua ikon anak panah di bahagian atas.

butang muat turun dan kongsi dalam fon google

Yang di sebelah kiri membolehkan anda melihat dan berkongsi koleksi fon anda. Apabila anda memilih untuk melakukannya, ia membuka halaman lanjutan di mana anda boleh memasukkan teks contoh dan melihatnya dalam semua fon sekaligus. Halaman ini juga bagus untuk dikongsi dengan orang lain.

Yang lebih penting ialah butang muat turun di sebelahnya. Dengan mengkliknya, anda boleh memuat turun fail fon untuk menggunakannya di mesin desktop anda (misalnya, di Photoshop). Gunakan Langit Langit untuk memastikan mereka sentiasa dikemas kini.

Kemudian, kami juga akan menunjukkan cara untuk memuat naik fail ini ke fon pelayan dan host anda secara langsung di laman web anda. Ingatlah perkara ini untuk masa depan. Buat masa ini, kami akan menunjukkan pustaka fon kedua yang serupa.

Sumber Tambahan untuk Fon Tersuai

  • 15+ fon selamat web yang kami cadangkan

Dengan perkara di atas, anda seharusnya dapat mencari sesuatu untuk diri anda sendiri. Satu petua terakhir - jika anda tidak tahu cara menggabungkan fon dengan betul, gunakan Pasangan Fon di mana pereka telah membuat kerja kaki untuk 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