Paano Mag-load ng Mga Font ng Lokal na Google Sa WordPress: Isang Item sa Pag-optimize na Natagpuan Sa GTmetrix, Pingdom, At Mga Pananaw sa Pahina ng Google

Kung ang iyong WordPress site ay mayroon Google Font mga error sa GTmetrix/Pingdom, Ang pag-load ng Google Font sa lokal ay dapat ayusin ang mga ito.


Hindi mo makokontrol ang ilang mga panlabas na mapagkukunan at script, na imposible silang mai-compress, minify, o mai-optimize. Ito ay maaaring malubhang nakakaapekto sa iyong WordPress bilis. Ang isa sa mga pinaka-karaniwang panlabas na mapagkukunan ay ang mga Google Font. Kung na-configure na mo ang isang plugin ng cache tulad ng WP Rocket o WP Pinakamabilis na Cache, maaari mong simulan ang pagpansin sa mga panlabas na mapagkukunan tulad ng mga font na nakakaapekto sa mga marka + mga oras ng pag-load. Dito naglalaro ang pag-load ng Google Font nang lokal. Pinapayagan nito ang iyong cache plugin na i-compress ang lahat ng mga mapagkukunan na may kaugnayan sa iyong pasadyang font (s).

Kumuha ng isang buong backup ng iyong site (o hindi bababa sa mga file na iyong na-edit) bago gumawa ng mga pagbabago.

Google-Fonts-GTmetrix

Hakbang 1: Pumili ng Isang Google Font

Sa halimbawang ito, gagamitin namin Roboto font na may dalawang timbang na font: regular (400) at naka-bold (700).

Google-Fonts-Selection

Gumamit ng Mas Mas kaunting Mga Font ng Google – panatilihin ang iyong mga Google Font sa isang minimum (mas kaunting mga font = mas kaunting mga kahilingan).

Maging Mapili Sa Mga Timbang na Font – nakakaapekto rin ang bilang ng mga timbang sa mga oras ng pag-load. Kung kailangan mo lamang ang naka-bold na bersyon, alisan ng tsek ang iba pang mga timbang upang i-load lamang ng Google Font ang mga kailangan mo.

Hakbang 2: I-download ang Font

I-download ang mga font kapag handa ka na. Awtomatikong i-download ng Google ang lahat ng mga timbang ng font, kaya ang pagpili ng mga timbang ng font ay hindi kinakailangan sa hakbang na ito, at sa halip ay kinakailangan sa hakbang 3.

Google-Font-download

Hakbang 3: I-convert ang Mga Font sa Mga Web Font

Susunod, mai-convert namin ang mga file na font (.ttf) sa mga file ng web font. Gumagamit ako Transfonter. Pumunta sa kanilang site, mag-click Magdagdag ng Mga Font, pagkatapos i-upload lamang ang mga uri ng font na gagamitin mo sa iyong website. Gumagamit ako ng Roboto-Regular.ttf at Roboto-Bold.ttf kaya’t pareho akong regular at naka-bold na timbang. Iwanan ang mga setting bilang default dahil sakupin ng WOFF at WOFF2 ang lahat ng mga pangunahing browser. Ngayon i-click ang convert.

Transfonter-Google-Font-Conversion

Piliin lamang ang mga uri ng font na gagamitin mo sa iyong website …

Google-Fonts-Conversion-Selection

Hakbang 4: I-download ang Na-convert na Mga File ng Font

Kapag na-convert ang mga font, maaari mong i-download ang mga ito. Sa file ng zip, isasama sa bawat font ang mga format ng WOFF at WOFF2 (dahil na-download namin ang 2 mga font, magkakaroon kami ng isang kabuuang 4 na mga file ng font).

WOFF-Google-Font-Conversion

Hakbang 5: Mag-upload ng Mga File ng Font Sa Mga WordPress File

Mag-upload ng mga file ng web font sa pamamagitan ng FTP o cPanel, na may perpektong wp-content / upload folder upang ang mga tema at pangunahing pag-update ay hindi mag-override sa kanila. Gumawa ako ng isang “font” folder at na-upload ang mga ito doon (upang paghiwalayin ang mga ito mula sa iba pang mga file). Upang kumpirmahin ang mga ito ay matagumpay na na-upload at mayroon kang tamang mga link, buksan ang mga link sa iyong browser at dapat magsimulang mag-download ang mga font.

Halimbawa:

  • 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

Palitan iyong website.com gamit ang iyong sariling website (at HTTPS kung gumagamit ng SSL). Sa isip, subukan ang lahat ng 4 na link at tiyakin na tama ang mga URL (at siguraduhing mai-save ang mga ito sa isang lugar).

Hakbang 6: Magdagdag ng Custom Font Upang CSS

Susunod, idadagdag namin ang CSS na nakuha mo sa loob ng nai-download na file na zip na pinangalanan styleheet.css. Ito ang CSS code na magkokonekta sa iyong mga font sa iyong umiiral na CSS at gawing handa silang gamitin.

Saan mailalagay ang CSS code ay subjective ngunit maaari kang gumamit ng isang panlabas na styleheet o ang WordPress ‘ wp_enqueue_style gumana sa functions.php, o sa pagsisimula ng iyong style.css file (o pasadyang.css Kung meron kang isa). Pupuntahan ko ito sa default style.css file ng tema. Kopyahin / ilagay ang code sa istilo ng estilo, at baguhin ang anumang kamag-anak na mga URL sa mga ganap na URL.

Default na mga URL sa styleheet.css:
src: url (‘Roboto-Bold.woff2’) format (‘woff2’),
url (‘Roboto-Bold.woff’) format (‘woff’);

Baguhin ang mga ito sa:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Format ng Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
url (‘http://yourwebsite.com/wp-content/uploads/fonts/Format ng Roboto-Regular.woff ‘) (‘ woff ‘);

Karaniwan, isama lamang ang folder ng URL bago ang filename ng font.

Ito ay opsyonal ngunit kung gusto mo, lumikha ng isang pasadyang klase upang madaling magamit ang font sa umiiral na HTML. Dito namin pinangalanan ang aming mga klase roboto_font at roboto_bold_font. Upang gawin ito, idagdag ito sa iyong style.css file (pagkatapos ng code sa itaas):

.roboto_font {

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

}

.roboto_bold_font {

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

bigat ng font: bold;

}

Hakbang 7: Subukan ang Font

Ngayon lumikha ng isang pahina ng pagsubok at ilagay ang sumusunod na code sa Editor ng Teksto

Pagsubok

Pagsubok sa Pasadyang Font

Pagsubok sa Pasadyang Font

Pagsubok sa Google-Font

I-preview ang pahina. Kung ginawa mo ito nang tama, dapat mong makita ang bagong pasadyang font! Ang unang heading ay ang default font ng iyong website, ang pangalawa at pangatlo ay ang mga font ng Google Font na idinagdag namin:

Lokal-Google-Font

Hakbang 8: Itakda ang Default Font

Upang gawin itong default font ng iyong website, idagdag ang CSS sa iyong style.css file:

katawan {

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

}

Mag-ingat ka! Kung mayroon ka nang isang pasadyang font, maaaring hindi ito lilitaw nang tama at nangangailangan ng pag-debug o pag-edit ng umiiral na mga katangian ng font-pamilya at palitan ang mga ito sa halip na ito..

Hakbang 9: Laging Magkaroon ng Font Fallbacks

Masamang kasanayan na mag-aplay ng isang Google Font bilang isang font-family. Sa halip, dapat kang magkaroon ng maraming mga font na tinukoy kasama ang mga karaniwang mga font tulad ng Arial, Times New Roman upang ang browser ay maaaring bumalik sa mga font na ito kung sakaling ang font ay hindi mag-load o mas matagal upang mai-load.

Nang walang fallback:
font-family: ‘Roboto’;

Gamit ang fallback font:
font-family: ‘Roboto’, Arial, sans-serif;

Ngayon, kung sakaling mabigo itong mai-load ang iyong mga Google Font, babalik ang browser sa Arial font o ang default na sans-serif font type ng system at hindi maging sanhi ng anumang mga isyu sa pag-render ng font.

Subukan muli ang Iyong Website (Sa GTmetrix)

Hindi mo dapat makita ang anumang mga error sa Font ng Google …

Bagong-GTmetrix-Ulat.png

May mga katanungan? Tawagan mo ko.

Mga Madalas na Itanong

&# x2705; Paano mo mapabilis ang Mga Font ng Google?

Ang pagsasama-sama ng mga Google Font, pagho-host ng mga ito nang lokal, at pagkonekta at prefecthing lahat ng ito ay makakatulong sa lahat na mapabuti ang kanilang mga oras ng pagkarga. Suriin ang iyong GTmetrix Waterfall upang makakuha ng isang benchmark ng iyong mga font, pagkatapos ay muling suriin ito pagkatapos ma-optimize.

&# x2705; Paano i-convert ang mga font sa mga file ng web font?

Ginagamit namin ang Transfonter.

&# x2705; Kumusta naman ang tungkol sa pasadyang mga font ng Elementor?

Ang Elementor Custom Font ay maaari ring mag-host ng Google Font sa lokal at naka-built-in sa Elementor Pro. Maaari mong gamitin ito upang i-upload ang iyong mga file ng font.

&# x2705; Aling mga plugin ang makakatulong na mai-optimize ang mga font?

Ang WP Rocket, OMGF, Autoptimize, at Perfmatters ay makakatulong sa lahat na mai-optimize ang mga font.

&# x2705; Ano ang tungkol sa prefetching at pagkonekta ng mga font?

Maaari itong mapabilis ang mga font sa pamamagitan ng pagtulong sa mga browser na maasahan ang mga ito nang mas mahusay. Ginagamit namin ang plugin ng Perfmatters ni Kinsta upang mag-prefetch at mag-preconnect ng mga font, ngunit maaari mo ring gamitin ang WP Rocket o plugin ng Pre Party Resource Hints.

Cheers,
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