Cara Muat Huruf Google Secara Lokal Di WordPress: Item Pengoptimalan Ditemukan Di GTmetrix, Pingdom, Dan Google PageSpeed ​​Insights

Jika situs WordPress Anda memiliki Google Font kesalahan dalam GTmetrix/Pingdom, memuat Google Font secara lokal harus memperbaikinya.


Anda tidak dapat mengontrol beberapa sumber daya eksternal dan skrip, yang membuatnya tidak mungkin untuk dikompres, dikurangi, atau dioptimalkan. Ini serius dapat mempengaruhi kecepatan WordPress Anda. Salah satu sumber daya eksternal yang paling umum adalah Google Font. Jika Anda sudah mengkonfigurasi plugin cache seperti WP Rocket atau WP Fastest Cache, Anda dapat mulai memperhatikan sumber daya eksternal seperti font yang mempengaruhi nilai + waktu buka. Di sinilah memuat Font Google secara lokal ikut bermain. Ini memungkinkan plugin cache Anda untuk mengompres semua sumber yang terkait dengan font khusus Anda.

Ambil cadangan penuh situs Anda (atau setidaknya file yang sedang Anda edit) sebelum membuat perubahan.

Google-Font-GTmetrix

Langkah 1: Pilih Font Google

Dalam contoh ini, kita akan gunakan Font Roboto dengan dua bobot font: regular (400) dan bold (700).

Google-Fonts-Selection

Gunakan Lebih Sedikit Font Google – menjaga Google Font Anda ke minimum (lebih sedikit fonts = lebih sedikit permintaan).

Selektif Dengan Bobot Font – jumlah bobot juga mempengaruhi waktu muat. Jika Anda hanya membutuhkan versi tebal, hapus centang pada bobot lainnya sehingga Google Font hanya memuat yang Anda butuhkan.

Langkah 2: Unduh Font-nya

Unduh font saat Anda siap. Google akan secara otomatis mengunduh semua bobot font, sehingga pemilihan bobot font tidak diperlukan pada langkah ini, dan sebaliknya diperlukan pada langkah 3.

Google-Font-Unduh

Langkah 3: Konversi Font Ke Web Font

Selanjutnya, kami akan mengonversi file font ini (.ttf) ke file font web. Saya akan menggunakan Transfonter. Pergi ke situs mereka, klik Tambahkan Font, kemudian unggah hanya jenis font yang akan Anda gunakan di situs web Anda. Saya menggunakan Roboto-Regular.ttf dan Roboto-Bold.ttf jadi saya memiliki bobot reguler dan tebal. Biarkan pengaturan sebagai default karena WOFF dan WOFF2 mencakup semua browser utama. Sekarang klik convert.

Transfonter-Google-Font-Conversion

Hanya pilih jenis font yang akan Anda gunakan di situs web Anda …

Google-Fonts-Konversi-Pemilihan

Langkah 4: Unduh File Font yang Dikonversi

Setelah font dikonversi, Anda dapat mengunduhnya. Dalam file zip, setiap font akan menyertakan format WOFF dan WOFF2 (karena kami mengunduh 2 font, kami akan memiliki total 4 file font).

WOFF-Google-Font-Conversion

Langkah 5: Unggah File Huruf ke File WordPress

Unggah file font web melalui FTP atau cPanel, idealnya di wp-content / unggahan folder sehingga pembaruan tema dan inti tidak menimpanya. Saya membuat folder “font” dan mengunggahnya di sana (untuk memisahkannya dari file lain). Untuk mengonfirmasi bahwa mereka berhasil diunggah dan Anda memiliki tautan yang benar, buka tautan di peramban Anda dan font-font tersebut akan mulai diunduh.

Contoh:

  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff
  • http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Bold.woff2

Menggantikan situs web Anda dengan situs web Anda sendiri (dan HTTPS jika menggunakan SSL). Idealnya, uji semua 4 tautan dan pastikan Anda memiliki URL yang benar (dan pastikan untuk menyimpannya di suatu tempat).

Langkah 6: Tambahkan Font Kustom ke CSS

Selanjutnya, kami akan menambahkan CSS yang Anda dapatkan di dalam file zip yang diunduh bernama stylesheet.css. Ini adalah kode CSS yang akan menghubungkan font-font Anda dengan CSS yang ada dan membuatnya siap digunakan.

Tempat menempatkan kode CSS bersifat subyektif tetapi Anda dapat menggunakan stylesheet eksternal atau WordPress ‘ wp_enqueue_style fungsi di functions.php, atau di awal style.css file (atau custom.css jika Anda memilikinya). Saya akan menempelkannya di file style.css tema default. Salin / tempel kode ke dalam stylesheet, dan ubah URL relatif apa pun menjadi URL absolut.

URL default di stylesheet.css:
src: url (‘Roboto-Bold.woff2’) format (‘woff2’),
format url (‘Roboto-Bold.woff’) (‘woff’);

Ubah ini menjadi:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Format Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Format Roboto-Regular.woff ‘) (‘ woff ‘);

Pada dasarnya, cukup sertakan URL folder sebelum nama file font.

Ini opsional tetapi jika Anda mau, buat kelas khusus untuk mudah menggunakan font di HTML yang ada. Di sini kami menamai kelas kami roboto_font dan roboto_bold_font. Untuk melakukan ini, tambahkan ini ke file style.css Anda (setelah kode di atas):

.roboto_font {

font-family: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

font-family: “Roboto”, “Arial”, sans-serif;

font-weight: bold;

}

Langkah 7: Uji Font

Sekarang buat halaman pengujian dan tempatkan kode berikut di Editor Teks

Pengujian

Uji Huruf Ubahsuaian

Uji Huruf Ubahsuaian

Google-Font-Testing

Pratinjau halaman. Jika Anda melakukannya dengan benar, Anda akan melihat font khusus baru! Judul pertama adalah font default situs web Anda, yang kedua dan ketiga adalah font Google Font yang kami tambahkan:

Lokal-Google-Font

Langkah 8: Atur Font Default

Untuk menjadikan ini font default situs web Anda, tambahkan CSS ini ke file style.css Anda:

tubuh {

font-family: “Roboto”, “Arial”, sans-serif;

}

Hati-hati! Jika Anda sudah memiliki font khusus, itu mungkin tidak muncul dengan benar dan membutuhkan debugging atau mengedit properti font-family yang ada dan menggantinya dengan yang ini sebagai gantinya.

Langkah 9: Selalu Miliki Font Fallbacks

Merupakan praktik yang buruk untuk menerapkan Google Font sebagai font-family. Sebagai gantinya, Anda harus memiliki beberapa font yang ditentukan termasuk font umum seperti Arial, Times New Roman sehingga browser dapat kembali ke font-font ini untuk berjaga-jaga jika font tidak memuat atau butuh waktu lebih lama untuk memuat.

Tanpa mundur:
font-family: ‘Roboto’;

Dengan font fallback:
font-family: ‘Roboto’, Arial, Sans Serif;

Sekarang, jika gagal memuat Google Font Anda, browser akan kembali ke font Arial atau jenis font sans-serif default sistem dan tidak menyebabkan masalah dengan rendering font.

Tes ulang situs web Anda (dalam GTmetrix)

Anda seharusnya tidak melihat kesalahan Font Google di dalamnya …

New-GTmetrix-Report.png

Punya pertanyaan? Jatuhkan aku satu baris.

Pertanyaan yang Sering Diajukan

&# x2705; Bagaimana Anda mempercepat Google Font?

Menggabungkan Google Font, hosting mereka secara lokal, dan pra-koneksi dan prefektur mereka semua dapat membantu meningkatkan waktu buka mereka. Periksa Air Terjun GTmetrix Anda untuk mendapatkan patokan font Anda, lalu uji ulang setelah dioptimalkan.

&# x2705; Bagaimana mengkonversi font file font web?

Kami menggunakan Transfonter.

&# x2705; Bagaimana dengan font khusus Elementor?

Elementor Custom Fonts juga dapat menginangi Google Font secara lokal dan terintegrasi dengan Elementor Pro. Anda dapat menggunakan ini untuk mengunggah file font Anda.

&# x2705; Plugin mana yang membantu mengoptimalkan font?

WP Rocket, OMGF, Autoptimize, dan Perfmatters semuanya dapat membantu Anda mengoptimalkan font.

&# x2705; Bagaimana dengan prefetching dan preconnecting font?

Ini dapat mempercepat font dengan membantu browser mengantisipasi mereka dengan lebih baik. Kami menggunakan plugin Perfmatters oleh Kinsta untuk prefetch dan preconnect font, tetapi Anda juga dapat menggunakan WP Rocket atau plugin Pre Party Resource Hints.

Bersulang,
Usama

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