Cara Menambah Font Web Google dalam Tema WordPress dengan cara “Betul”

Fon Google adalah sumber percuma yang luar biasa untuk pereka web. Di WPBv4, kami telah mula menggunakan kombinasi Font Google yang popular: Oswald dan Lora. Sebilangan pengguna kami telah meminta kami bagaimana menambahkan fon Web Google dalam tema WordPress. Sekiranya anda ingat, kami menunjukkan cara menambahkan fon Google di WordPress Post Editor. Dalam artikel ini, kami akan menunjukkan kepada anda cara menambahkan Font Web Google dalam tema WordPress anda Cara yang betul, dioptimumkan untuk prestasi.


Cari Fon Web Google yang Anda Suka

Perkara pertama yang perlu anda lakukan ialah mencari fon Google yang anda suka. Pergi ke fon Google dan cari di perpustakaan. Apabila anda menemui fon yang anda suka, klik pada “Penggunaan pantas” butang.

Fon penggunaan pantas dari Google Font

Setelah anda mengklik butang penggunaan cepat, anda akan dibawa ke halaman baru. Tatal ke bawah sehingga anda melihat kotak arahan penggunaan dengan kod yang dapat anda tambahkan ke laman web anda.

Kod benam fon Google

Anda akan melihat bahawa terdapat tiga tab yang berbeza untuk menambahkan fon ke laman web anda. Yang pertama adalah kaedah standard dan disyorkan untuk menambahkan fon Google ke laman web anda. Tab kedua menggunakan kaedah @import CSS, dan tab terakhir menggunakan kaedah JavaScript.

Kami akan menunjukkan kepada anda bagaimana menggunakan setiap kaedah ini dan apa kelebihan dan kekurangannya.

Tutorial Video

Langgan WPBeginner

Sekiranya anda tidak menyukai video atau memerlukan lebih banyak arahan, teruskan membaca.

Menambah Font Web Google dalam Tema WordPress

Kami sering melihat orang menggunakan dua kaedah pertama.

Cara termudah adalah dengan membuka tema anda gaya.css fail dan tampal kod fon yang anda dapat di tab @import, seperti ini:

@import url (https://fonts.googleapis.com/css?family=Lora);
@import url (https://fonts.googleapis.com/css?family=Oswald);

Anda juga boleh menggabungkan beberapa permintaan fon menjadi satu. Inilah cara anda melakukannya:

@import url (https://fonts.googleapis.com/css?family=Lora|Oswald);

Kaedah ini sangat mudah tetapi bukan kaedah terbaik untuk menambahkan fon Google ke laman WordPress anda. Menggunakan kaedah @import menyekat muat turun selari, yang bermaksud penyemak imbas akan menunggu fail yang diimport selesai dimuat sebelum mula memuat turun kandungan lain.

Sekiranya anda WAJIB menggunakan @import, sekurang-kurangnya gabungkan beberapa permintaan menjadi satu.

Kaedah Meningkatkan Fon Web Google yang Dioptimumkan Prestasi

Kaedah terbaik untuk menambahkan fon Google adalah dengan menggunakan kaedah Standard yang menggunakan kaedah pautan dan bukannya kaedah import. Cukup ambil URL fon anda yang anda dapat dari langkah 1. Sekiranya anda menambah banyak fon, maka anda boleh menggabungkan kedua fon tersebut dengan | watak. Kemudian letakkan kod di bahagian kepala tema anda.

Anda kemungkinan besar perlu mengedit fail header.php anda, dan menampal kod berikut di atas helaian gaya utama anda. Contohnya akan kelihatan seperti ini:

Pada dasarnya tujuannya adalah untuk meletakkan permintaan fon seawal mungkin. Menurut blog Google Web Font, jika ada tag skrip sebelum pengisytiharan @ font-face, maka Internet Explorer tidak akan membuat apa-apa di halaman sehingga fail fon selesai dimuat turun.

Setelah selesai, anda boleh mula menggunakannya dalam fail CSS tema anda seperti ini:

h1 {
font-keluarga: ‘Oswald’, Helvetica, Arial, serif;
}

Sekarang terdapat banyak kerangka tema dan tema kanak-kanak di luar sana. TIDAK dianjurkan untuk mengubah fail tema ibu bapa anda secara khusus jika anda menggunakan kerangka tema kerana perubahan anda akan diganti pada saat anda mengemas kini kerangka tersebut. Anda perlu menggunakan cangkuk dan penapis yang ditunjukkan kepada anda oleh tema atau kerangka induk itu untuk menambahkan fon Google dengan betul dalam tema anak anda.

Memetik Fon Google dengan betul di WordPress

Cara lain untuk menambahkan fon Google ke laman WordPress anda adalah dengan memasukkan fon dalam fail functions.php tema anda atau plugin khusus laman web.

fungsi wpb_add_google_fonts () {

wp_enqueue_style (‘wpb-google-fonts’, ‘https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false);
}

add_action (‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’);

Jangan lupa ganti pautan fon dengan pautan anda.

Memuatkan Fon Google Menggunakan JavaScript

Untuk kaedah ini, anda perlu menyalin kod di tab JavaScript di bahagian arahan penggunaan fon Google. Anda boleh menampal kod ini dalam tema header.php tema kanak-kanak anda sebaik sahaja tag.

Petua terakhir kami untuk menggunakan Google Web Font di laman web anda ialah jangan memuat fon yang tidak akan anda gunakan. Contohnya, jika anda hanya mahukan berat badan yang berani dan normal, jangan tambahkan semua gaya lain.

Kami berharap artikel ini dapat membantu anda menambahkan Google Web Font dalam tema WordPress anda dengan cara yang betul, sehingga laman web anda dapat memuat dengan pantas. Anda mungkin juga ingin melihat panduan kami mengenai cara menambahkan fon Typekit di WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map