Cum să încărcați fonturi Google local în WordPress: un element de optimizare găsit în GTmetrix, Pingdom și Google PageSpeed ​​Insights

Dacă site-ul dvs. WordPress are Font Google erori în GTmetrix/Pingdom, încărcarea fonturilor Google local ar trebui să le rezolve.


Nu puteți controla unele resurse și scripturi externe, ceea ce le face imposibil de comprimat, minificat sau optimizat. Acest lucru poate afecta serios viteza WordPress. Una dintre cele mai comune resurse externe sunt fonturile Google. Dacă sunteți deja configurat un plugin pentru cache, cum ar fi WP Rocket sau WP Fastest Cache, puteți începe să observați resurse externe, cum ar fi fonturile care afectează gradele + timpul de încărcare. Aici intră în joc încărcarea fonturilor Google local. Acest lucru permite pluginului dvs. de memorie cache să comprime toate resursele legate de fonturile dvs. personalizate.

Faceți o copie de rezervă completă a site-ului dvs. (sau cel puțin a fișierelor pe care le editați) înainte de a face modificări.

Google-Fonturi-GTmetrix

Pasul 1: alegeți un font Google

În acest exemplu, vom folosi Roboto font cu două greutăți de fonturi: obișnuit (400) și îndrăzneț (700).

De Google Fonturi-Selecție

Folosiți mai puține fonturi Google – mențineți fonturile Google la minimum (mai puține fonturi = mai puține solicitări).

Fii selectiv cu greutatea fontului – numărul de greutăți afectează și timpul de încărcare. Dacă aveți nevoie doar de versiunea îndrăzneață, debifați celelalte greutăți, astfel încât fonturile Google să le încarce doar pe cele de care aveți nevoie.

Pasul 2: Descărcați fontul

Descărcați fonturile când sunteți gata. Google va descărca automat toate greutățile fontului, deci selectarea greutăților fonturilor nu este necesară la acest pas și este necesară în schimb la pasul 3.

De Google Fonturi-descărcare

Pasul 3: Conversia fonturilor în fonturi Web

În continuare, vom converti aceste fișiere de caractere (.ttf) în fișiere de font web. Voi folosi Transfonter. Accesați site-ul lor, faceți clic pe Adăugați fonturi, apoi încărcați numai tipurile de fonturi pe care le veți utiliza pe site-ul dvs. web. Eu folosesc Roboto-Regular.ttf și Roboto-Bold.ttf așa că am greutăți obișnuite și îndrăznețe. Lăsați setările în mod implicit, deoarece WOFF și WOFF2 acoperă toate browserele principale. Acum faceți clic pe converti.

Transfonter-Google-Font-conversie

Selectați numai tipurile de fonturi pe care le veți utiliza pe site-ul dvs. web …

Google Fonturi-conversie-Selecție

Pasul 4: Descărcați fișierele font convertite

După ce fonturile sunt convertite, le puteți descărca. În fișierul zip, fiecare font va include formate WOFF și WOFF2 (din moment ce am descărcat 2 fonturi, vom avea un total de 4 fișiere font).

WOFF-Google-Font-conversie

Pasul 5: Încărcați fișierele de caractere în fișiere WordPress

Încărcați fișierele de font web prin FTP sau cPanel, în mod ideal în wp-content / încărcări folderul astfel încât tema și actualizările de bază să nu le ocolească. Am creat un folder „fonturi” și le-am încărcat acolo (pentru a le separa de alte fișiere). Pentru a confirma că au fost încărcate cu succes și aveți linkurile corecte, deschideți linkurile din browserul dvs. și fonturile ar trebui să înceapă să descarce.

Exemplu:

  • 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

A inlocui yourwebsite.com cu propriul site web (și HTTPS dacă utilizați SSL). În mod ideal, testați toate cele 4 legături și asigurați-vă că aveți adresele URL corecte (și, de asemenea, asigurați-vă că le salvați undeva).

Pasul 6: Adăugați font personalizat la CSS

În continuare, vom adăuga CSS-ul pe care îl aveți în fișierul zip descărcat numit stylesheet.css. Acesta este codul CSS care va conecta fonturile cu CSS-ul existent și le va face gata de utilizare.

Unde să plasați codul CSS este subiectiv, dar puteți utiliza o foaie de stil externă sau WordPress ” wp_enqueue_style funcție în funcții.php sau la începutul dvs. style.css fișier (sau CSS personalizat daca ai una). O voi lipi în fișierul style.css implicit al temei. Copiați / lipiți codul în foaia de stil și schimbați adresele URL relative în adrese URL absolute.

Adrese URL implicite în stylesheet.css:
src: format url („Roboto-Bold.woff2”) („woff2”),
format url („Roboto-Bold.woff”) („woff”);

Modificați-le în:
src: url (‘http://yourwebsite.com/wp-content/uploads/fonts/Formatul Roboto-Regular.woff2 ‘) (‘ woff2 ‘),
URL-ul (“http://yourwebsite.com/wp-content/uploads/fonts/Format Roboto-Regular.woff ‘) (‘ woff ‘);

Practic, trebuie doar să includeți adresa URL a folderului înainte de numele fișierului fontului.

Aceasta este opțională, dar dacă doriți, creați o clasă personalizată pentru a utiliza cu ușurință fontul în HTML-ul existent. Aici am numit clasele noastre roboto_font și roboto_bold_font. Pentru a face acest lucru, adăugați acest lucru în fișierul dvs. style.css (după codul de mai sus):

.roboto_font {

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

}

.roboto_bold_font {

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

font-greutate: bold;

}

Pasul 7: Testează fontul

Acum creați o pagină de test și introduceți următorul cod în Editor de texte

Testarea

Test de font personalizat

Test de font personalizat

Google-fonts-Testare

Previzualizați pagina. Dacă ați făcut-o corect, ar trebui să vedeți noul font personalizat! Primul titlu este fontul implicit al site-ului dvs. web, al doilea și al treilea sunt fonturile Google Fonts pe care le-am adăugat:

Local-Google Fonturi

Pasul 8: Setați fontul implicit

Pentru a face ca acesta să fie fontul implicit al site-ului dvs. web, adăugați acest CSS în fișierul dvs. style.css:

corp {

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

}

Ai grija! Dacă aveți deja un font personalizat, este posibil să nu apară corect și să necesite depanarea sau editarea proprietăților familiei de fonturi existente și să le înlocuiți cu acesta.

Pasul 9: Aveți întotdeauna întârzieri de fonturi

Este o practică proastă să aplicați un font Google ca familie de fonturi. În schimb, ar trebui să aveți mai multe fonturi specificate, inclusiv fonturi comune, cum ar fi Arial, Times New Roman, astfel încât browserul să poată reveni la aceste fonturi doar în cazul în care fontul nu se încarcă sau durează mai mult timp la încărcare..

Fără fallback:
font-family: ‘Roboto’;

Cu font de tip fallback:
font-family: ‘Roboto’, Arial, sans-serif;

Acum, în cazul în care nu reușește încărcarea fonturilor Google, browserul va reveni la fontul Arial sau la tipul implicit de font sans-serif al sistemului și nu va cauza probleme cu redarea fontului..

Retestează-ți site-ul (În GTmetrix)

Nu ar trebui să vedeți nicio eroare a fontului Google …

Nou-GTmetrix-Report.png

Aveți întrebări? Da-mi un vers.

întrebări frecvente

&# X2705; Cum grăbiți fonturile Google?

Combinarea fonturilor Google, găzduirea lor la nivel local, preconectarea și prefectarea acestora pot ajuta la îmbunătățirea timpilor de încărcare. Verificați Cascada GTmetrix pentru a obține un punct de referință al fonturilor dvs., apoi reproșați-l după optimizare.

&# X2705; Cum se convertesc fonturile fișierele de fonturi web?

Folosim Transfonter.

&# X2705; Ce zici de fonturile personalizate Elementor?

Fontor Custom Elementor poate găzdui, de asemenea, fonturi Google local și este încorporat în Elementor Pro. Puteți utiliza acest lucru pentru a încărca fișierele cu fonturi.

&# X2705; Ce plugin-uri ajută la optimizarea fonturilor?

WP Rocket, OMGF, Autoptimize și Perfmatters vă pot ajuta să optimizați fonturile.

&# X2705; Ce se întâmplă cu prefacerea și preconectarea fonturilor?

Acestea pot accelera fonturile ajutând browserele să le anticipeze mai bine. Folosim pluginul Perfmatters de către Kinsta pentru preînchiderea și preconectarea fonturilor, dar puteți folosi și WP Rocket sau pluginul pentru sugestii de resurse Pre Party.

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