Kako lokalno učitati Google fontove u WordPressu: stavka za optimizaciju pronađena u GTmetrix-u, Pingdom-u i Google PageSpeed ​​Insights

Ako vaša web stranica WordPress ima Google Font pogreške u GTmetrix/Pingdom, učitavanje Google Fontova lokalno bi ih trebalo riješiti.


Ne možete kontrolirati neke vanjske resurse i skripte zbog čega ih je nemoguće komprimirati, umanjiti ili optimizirati. To može ozbiljno utjecati na brzinu vašeg WordPressa. Jedan od najčešćih vanjskih resursa su Google fontovi. Ako ste već konfigurirali predmemoriju za predmemoriju kao što je WP Rocket ili WP Fastest Cache, možete početi primjećivati ​​vanjske resurse poput fontova koji utječu na ocjene + vrijeme učitavanja. Ovdje se pojavljuje lokalno učitavanje Google Fontova. To omogućuje vašem dodatku za predmemoriju komprimiranje svih resursa povezanih s vašim prilagođenim fontom.

Prije izmjene napravite sigurnosnu kopiju web lokacije (ili barem datoteka koje uređujete).

Google Fontovi-GTmetrix

1. korak: odaberite Google font

U ovom ćemo primjeru koristiti Roboto font s dvije težine fonta: redovna (400) i podebljana (700).

Google Fontovi za izbor

Koristite manje Googleovih fontova – Smanjite svoje Google Fontove na minimum (manje fontova = manje zahtjeva).

Budite selektivni s utezima slova – broj utega utječe i na vrijeme opterećenja. Ako vam treba samo podebljana verzija, poništite odabir drugih utega, tako da Google Fontovi učitavaju samo one koje su vam potrebne.

2. korak: preuzmite font

Preuzmite fontove kada ste spremni. Google će automatski preuzeti sve težine fonta, tako da odabir težine fonta nije potreban u ovom koraku, već je potreban u koraku 3.

Google Fontovi-Preuzimanje

3. korak: Pretvaranje fontova u web-fontove

Zatim ćemo te datoteke fontova (.ttf) pretvoriti u datoteke s fontom. Koristit ću se Transfonter. Otiđite na njihovu stranicu, kliknite Dodavanje fontova, zatim na svoju web lokaciju prenosite samo vrste fontova koje koristite. Koristim Roboto-Regular.ttf i Roboto-Bold.ttf pa imam i redovite i podebljane utege. Ostavite postavke kao zadane jer WOFF i WOFF2 pokrivaju sve glavne preglednike. Sada kliknite pretvoriti.

Transfonter-Google-font-pretvorbe

Odaberite samo vrste fonta koje ćete koristiti na svojoj web stranici …

Google Fontovi-pretvorbe, Izbor

Korak 4: Preuzmite pretvorene datoteke fontova

Nakon pretvorbe fontova, možete ih preuzeti. U zip datoteci svaki font će sadržavati WOFF i WOFF2 formate (budući da smo preuzeli 2 fonta, imat ćemo ukupno 4 datoteke fonta).

WOFF-Google-font-pretvorbe

5. korak: Učitajte datoteke sa fontom u datoteke WordPressa

Prenesite datoteke s web fontom putem FTP-a ili cPanela, u idealnom slučaju na wp-sadržaja / prijenosa mape kako ih tema i ažuriranja jezgara ne mogu prevladati. Napravio sam mapu fontova i stavio ih tamo (da ih odvojim od drugih datoteka). Da biste potvrdili da su uspješno prenesene i imate ispravne veze, otvorite veze u pregledniku i fontovi bi trebali početi preuzimati.

Primjer:

  • 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

Zamijeniti yourwebsite.com s vlastitom web stranicom (i HTTPS ako koristite SSL). Idealno je da testirate sve 4 veze i provjerite jesu li URL-ovi ispravni (a također ih ne zaboravite negdje).

Korak 6: Dodajte prilagođeni font u CSS

Dalje ćemo dodati CSS koji ste dobili unutar preuzete zip datoteke nazvane stylesheet.css. Ovo je CSS kôd koji će vaše fontove povezati s vašim postojećim CSS-om i učiniti ih spremnim za upotrebu.

Gdje smjestiti CSS kôd je subjektivan, ali možete koristiti vanjsku tablicu stilova ili WordPress ‘ wp_enqueue_style funkcionirajte u funkciji.php ili na početku vašeg style.css datoteka (ili custom.css ako ga imate). Zalijepiti ću je u zadanu datoteku style.css teme. Kopirajte / zalijepite kôd u tablicu stilova i promijenite sve relativne URL-ove u apsolutne URL-ove.

Zadani URL-ovi u stylesheet.css:
src: url (‘Roboto-Bold.woff2’) format (‘woff2’),
url (‘Roboto-Bold.woff’) format (‘woff’);

Promijenite ih u:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff2 ‘) format (‘ woff2 ‘),
url (”http://yourwebsite.com/wp-content/uploads/fonts/Roboto-Regular.woff ‘) format (‘ woff ‘);

U osnovi, samo uključite URL mape prije naziva datoteke fonta.

To je opcionalno, ali ako vam je draže, stvorite prilagođenu klasu za jednostavno korištenje fonta u postojećem HTML-u. Ovdje smo imenovali svoje časove roboto_font i roboto_bold_font. Da biste to učinili, dodajte to u datoteku style.css (nakon gornjeg koda):

.roboto_font {

obitelj fontova: “Roboto”, “Arial”, sans-serif;

}

.roboto_bold_font {

obitelj fontova: “Roboto”, “Arial”, sans-serif;

težina slova: podebljano;

}

7. korak: testirajte font

Sada napravite testnu stranicu i stavite sljedeći kôd u Uređivač teksta

Testiranje

Prilagođeni test slova

Prilagođeni test slova

Google Fontovi-testiranje

Pregledajte stranicu. Ako ste to pravilno napravili, trebali biste vidjeti novi prilagođeni font! Prvi naslov je zadani font vaše web stranice, drugi i treći su fontovi Google Fonts koje smo dodali:

Lokalna-Google-fontovi

Korak 8: Postavite zadani font

Da biste postavili ovaj zadani font vaše web lokacije, dodajte ovaj CSS u datoteku style.css:

tijelo {

obitelj fontova: “Roboto”, “Arial”, sans-serif;

}

Budi oprezan! Ako već imate prilagođeni font, on se možda neće prikazati ispravno i zahtijeva uklanjanje pogrešaka ili uređivanje postojećih svojstava porodice fontova i njihovo zamjenu umjesto ovog.

Korak 9: Uvijek ima povratnih fontova

Loša je praksa primijeniti Google Font kao obitelj fontova. Umjesto toga, trebali biste odrediti više fontova, uključujući uobičajene fontove kao što su Arial, Times New Roman kako bi se preglednik mogao vratiti na te fontove samo u slučaju da se font ne učita ili traje duže..

Bez rezervnog postupka:
obitelj fontova: ‘Roboto’;

Sa zamjenskim fontom:
obitelj fontova: “Roboto”, Arial, bez vitica;

Sada, u slučaju da ne uspije učitati vaše Google fontove, preglednik će se vratiti na Arial font ili zadani tip sans-serif fontova sustava i ne uzrokovati probleme s ispisivanjem fonta..

Ponovno testirajte svoju web stranicu (u GTmetrix)

Ne biste trebali vidjeti nikakve pogreške u Google Fontima u njemu …

Novi-GTmetrix-Report.png

Imate pitanja? Pusti mi crtu.

Često postavljana pitanja

&# X2705; Kako ubrzati Google fontove?

Ako kombinirate Google fontove, ugostite ih lokalno, te ih prethodno povežete i preferirate, sve to može poboljšati vrijeme učitavanja. Provjerite svoj GTmetrix Waterfall da biste dobili mjerilo svojih fontova, a zatim ga ponovno optimizirajte nakon optimizacije.

&# X2705; Kako pretvoriti fontove u datoteke s fontom?

Koristimo Transfonter.

&# X2705; Što je sa Elementor prilagođenim fontovima?

Elementor prilagođeni fontovi također mogu lokalno ugostiti Google fontove i ugrađeni su u Elementor Pro. To možete koristiti za prijenos datoteka sa fontom.

&# X2705; Koji dodaci pomažu u optimizaciji fontova?

WP Rocket, OMGF, Autoptimize i Perfmatters mogu vam sve pomoći da optimizirate fontove.

&# X2705; Što je sa unaprijed dohvaćanjem i ponovnim povezivanjem fontova?

Oni mogu ubrzati fontove pomažući preglednicima da ih bolje predvide. Kinsta upotrebljavamo dodatak Perfmatters od strane Kinsta-a za unaprijed dohvaćanje i pre-povezivanje fontova, ali možete koristiti i WP Rocket ili dodatak Pre Party Resource Hints..

Živjeli,
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