Cum se utilizează fonturile Google cu WordPress?

Web-ul modern se referă la experiența utilizatorului. Companiile investesc o cantitate mare de timp și bani pentru a se asigura că vizitatorii site-ului lor web au cea mai bună experiență în timp ce navighează pe site-ul lor.

Reprezentarea textului joacă un rol esențial în estetica site-ului web. Nu contează cât de bună este calitatea conținutului dvs.; dacă nu este plăcut de citit și este prea aglomerat pentru cititori, atunci toate eforturile tale se risipesc.

Deși aveți la dispoziție o serie de opțiuni tipografice, cel mai simplu mod de a obține acces la sute de fonturi profesionale (gratuit) este utilizarea Fonturilor Google cu site-ul dvs. WordPress.

În această postare, vă voi prezenta instrucțiuni pas cu pas pentru a afla cum să adăugați manual fonturi WordPress WordPress cu site-ul dvs. manual și utilizând pluginul Easy Google Fonts . De asemenea, vă voi arăta cele mai bune fonturi pe care le puteți utiliza pentru a îmbunătăți lizibilitatea conținutului site-ului dvs. web.

1- Ce sunt fonturile Google WordPress și de ce ar trebui să le folosiți?

Înainte de a începe, să aruncăm rapid o privire la ceea ce sunt Google Fonts, împreună cu avantajele cheie ale utilizării lor pe site-ul dvs. WordPress.

Google Fonts este o bibliotecă de fonturi licențiate gratuit lansată în 2010. Puteți utiliza uimitoarea bibliotecă Google Fonts apelând API-ul furnizat. Faptul interesant este că puteți utiliza 877 de fonturi optimizate pentru web - gratuit. Este incredibil. Dispune de un director web interactiv care vă permite să căutați anumite tipuri de fonturi și să le testați în browserul dvs. web.

Utilizarea WordPress Fonturi Google are o serie de avantaje. Acestea sunt gratuite (chiar și pentru proiecte comerciale), pre-găzduite (deci nu vor prelua resursele serverului dvs.) și pot fi descărcate (le puteți utiliza în format tipărit).

Există un număr mare de site-uri web care utilizează în prezent Google Fonts în WordPress în avantajul lor. Toate temele moderne acceptă utilizarea fonturilor Google.

Dacă sunteți gata să reveniți la tipografia site-ului dvs. cu fonturi web ușor de utilizat, tot ce trebuie să faceți este să găsiți fonturile potrivite și să le utilizați cu site-ul dvs. WordPress.

2- Cum se adaugă manual Google Fonts pe WordPress

Google Fonts elimină cea mai mare parte din greutatea de a încorpora familiile de fonturi pe site-ul dvs. web. Aceasta este o bibliotecă online care poate fi apelată în orice proiect web, ca orice alt script JS sau CSS.

În această secțiune, vă voi arăta cum să instalați manual Google Fonts pe un site web WordPress.

Pasul 1: Găsiți fontul pe care doriți să îl adăugați pe site-ul dvs. web

Pentru a începe, răsfoiți directorul Google Fonts și alegeți fontul pe care doriți să îl utilizați pe site-ul dvs. WordPress. Dacă aveți deja un tip de caractere specific, îl puteți căuta pur și simplu folosind caseta de căutare din bara laterală dreaptă.

De asemenea, puteți filtra fonturile după categorie, limbi, numărul de stiluri, grosime, înclinare și lățime sau sortați-le după data la care au fost adăugate, alfabetic, în tendințe sau după popularitate.

• Acestea sunt fonturi care au linii mici atașate la sfârșitul liniei, de exemplu Times New Roman și Courier .
• Sans-Serif. Fonturile care nu au liniile mici la sfârșitul liniei de caractere sunt fonturi sans-serif, de exemplu Helvetica și Roboto .
• Fonturile afișate sunt utilizate în principal pentru textul mare, de exemplu titluri.
• Fonturi care au un aspect scris de mână, de ex. Pacifico .
• Fonturi care au exact aceeași distanță între toate caracterele, de exemplu Source Code Pro .

Unul dintre cele mai bune avantaje ale utilizării caracteristicii directorului interactiv Google Fonts este că puteți previzualiza rapid fonturile care vă interesează. Tot ce trebuie să faceți este să faceți clic în caseta câmpului fontului și să tastați textul în acesta.

În scopul acestui tutorial, voi merge cu Open Sans .

Pasul 2: Adăugați fonturile la selecția dvs.

Acum, că știm cu ce font folosim, să îl adăugăm la selecția noastră. Puteți face acest lucru făcând clic pe semnul plus (+) din colțul din dreapta sus al casetei familiei de fonturi.

Puteți adăuga oricâte familii de fonturi doriți la selecția dvs. După ce ați terminat, faceți clic pe bara neagră X Family Selected din partea de jos a ecranului pentru a vizualiza selecția dvs.

Pasul 3: Personalizați fontul

Bara X Family Selected deschide o fereastră care are două file - Încorporați și Personalizați . Înainte de a încorpora familia de fonturi pe site-ul nostru WordPress, vom lua un moment pentru a o personaliza puțin.

Din ecranul Personalizare , bifați casetele pentru stilurile și limbile pe care doriți să le puteți utiliza pe site-ul dvs. web.

Rețineți că cu cât selectați mai multe stiluri și limbi de font, cu atât va dura mai mult timp pentru încărcarea paginilor site-ului dvs. Veți observa un indicator de timp de încărcare în același ecran, care vă permite să știți dacă selecția dvs. va reduce timpul de încărcare.

Pentru a împiedica selecția de fonturi să afecteze timpii de încărcare a paginii site-ului nostru, am decis să mergem cu o selecție simplă - light 300 și regular 400 .

Pasul 4: încorporați fonturile Google în site-ul dvs. WordPress

Există mai multe moduri în care puteți adăuga un font personalizat la WordPress. Vă vom arăta cum să o faceți folosind funcția wp_enqueue_style () , deoarece este abordarea recomandată pentru site-urile web WordPress.

Începeți îndreptându-vă înapoi la fila Încorporați și copiați linkul (URL) din fontul selectat în clipboard. În cazul nostru, adresa URL completă este: https://fonts.googleapis.com/css?family=Open+Sans:300,400 .

Apoi, conectați-vă la tabloul de bord WordPress și în interiorul aspectului accesați Editor și deschideți fișierul funcției.php a temei dvs. active utilizând un client FTP și adăugați-l următorul cod.

 funcție add_google_fonts () {

wp_enqueue_style ('add_google_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400', false);}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Notă: va trebui să înlocuiți adresa URL cu a dvs.

Puteți începe să utilizați fontul pe care tocmai l-ați adăugat utilizând opțiunile de tipografie a temei dvs. (dacă le acceptă) sau adăugând un cod în foaia de stil principală a temei dvs. active. De exemplu, dacă am dori să schimbăm toate titlurile H2 cu noul nostru font, codul nostru ar putea arăta cam așa:

 h2 {

font-family: „Open Sans”, sans-serif;

}

Mi-am actualizat cu succes WordPress-ul cu Google Fonts. Este posibil ca Google Fonts să nu funcționeze din anumite motive ciudate și să constat că trebuie să mă refer la setul de fonturi implicit care poate fi afișat ca o copie de rezervă. Dar acest lucru se întâmplă destul de rar.

De ce viteza este crucială pentru SEO și UX?

Aceste sfaturi ale experților vă vor arăta cum să îmbunătățiți viteza site-urilor dvs. WordPress.

Sunt de acord cu Termenii serviciului și politica de confidențialitate Cloudways

Obțineți cartea electronică acum!

Mulțumesc

Cartea dvs. electronică este în drum spre Mesaje primite.

Pentru a face acest lucru, pur și simplu adăugați tipurile implicite de fonturi găzduite local, cum ar fi Georgia, Cambria sau Courier.

3- Cum să adăugați fonturi Google la WordPress utilizând un plugin

Pentru unii, integrarea manuală a WordPress Google Fonts ar putea să nu fie opțiunea. Nu-ți face griji. Există un alt mod (mai simplu) de a adăuga Google Fonts pe site-ul dvs. WordPress. Prin intermediul unui plugin.

În această secțiune, vă voi arăta cum puteți integra Google Fonts în WordPress utilizând pluginul Easy Google Fonts .

Pasul 1: Instalați și activați pluginul

Conectați-vă la panoul de administrare WordPress și navigați la Pluginuri > Adăugați un nou . Căutați Easy Google Fonts și instalați-l pe site-ul dvs. web.

Odată ce pluginul este instalat, faceți clic pe butonul Activare pentru a începe să îl utilizați.

Pasul 2: începeți să utilizați Google Fonts

După ce activați pluginul pentru site-ul dvs. web, acesta va stoarce automat foile de stil pentru Fonturile Google pe care alegeți să le utilizați. Pentru a începe, accesați Aspect > Personalizați din panoul de administrare WordPress.

Veți observa că un nou element de meniu a fost adăugat la WordPress Customizer numit Tipografie .

Vă permite să controlați setările de tipografie ale paragrafelor și diverselor titluri (H1 până la H6).

Să presupunem că ați dorit să editați fontul Paragrafele de pe site-ul dvs., pluginul Easy Google Fonts vă permite să îi personalizați stilurile, aspectul și poziția. Să aruncăm o privire la diferitele opțiuni de stil pe care le oferă.

Din fila Stiluri , puteți configura scriptul, familia de fonturi, greutatea fontului, decorarea textului și transformarea textului. Opțiunea pentru familie de fonturi vă oferă acces la sute de fonturi Google clasificate ca fonturi web standard , fonturi Google Serif , fonturi Google Sans Serif , fonturi Google Display , fonturi Google pentru scris de mână și fonturi Google Monospace .

Deci, dacă am dori să folosim Open Sans , am seta opțiunea script la latină , opțiunea familiei de fonturi la Open Sans și greutatea fontului la Regular (care este echivalentul lui Regular 400 ).

Verificați cum s-a schimbat fontul în ecranul de previzualizare? Un avantaj major al utilizării pluginului Easy Google Fonts este că puteți previzualiza în direct cum arată postările și paginile dvs. atunci când selectați un font cu care să mergeți.

4- Cele mai bune fonturi de utilizat

Cerul este limita când vine vorba de selectarea fonturilor cu Google Fonts. În calitate de webmaster, aveți libertatea de a alege oricare dintre fonturile pe care le considerați potrivite pentru cititorii dvs. Cu toate acestea, există unele fonturi care sunt populare pentru lizibilitate.

Să ne uităm la cele mai bune fonturi Google care sunt utilizate pe scară largă și oferă cea mai bună lizibilitate.

1. Lora

Lora este una dintre familiile de fonturi utilizate pe scară largă datorită lizibilității și variantelor sale.

2. Playfair Display

Această familie de fonturi oferă o mai bună lizibilitate a textului și este potrivită atât pentru web, cât și pentru tipărire.

3. Arhiv

Acest font aparține familiei de caractere grotesque sans serif. Are un aspect curat, potrivit pentru textul corpului.

4. Roboto

Roboto este unul dintre cele mai utilizate fonturi de pe web-ul modern. Arată grozav cu designuri web minime și oferă lizibilitate excelentă utilizatorilor.

5. Montserrat

Montserrat are rădăcini în tipografia urbană a secolului al XX-lea. O altă familie de fonturi foarte populară, care vine cu o serie de variante.

6. Rubik

Foarte curat, Rubik este o familie de fonturi san serif care a deservit peste 470.000 de site-uri web din întreaga lume.

7. Sursa Sans

Trebuie să fi folosit familia fonturilor Source Sans, deoarece are mai mult de 4,18 miliarde de iterații prin API-ul Google Fonts.

8. Lato

Lato este, de asemenea, font Sans Serif și este considerat font profesional și clar de către webmasteri. Este folosit în aproape fiecare poziție a conținutului.

9. PT Serif

Cu peste un milion de site-uri web care utilizează acest font, PT Serif este printre cele mai utilizate fonturi Google. Este potrivit atât pentru web, cât și pentru documente tipărite.

10. Deschideți Sans

Fontul Open Sans este cel mai apropiat de scrierea umană, ceea ce face mai ușor de citit atât pe web, cât și pe hârtie. API-ul Google Fonts a servit acest font de peste 28,5 miliarde de ori în doar o săptămână!

Există multe alte fonturi Google pentru site-uri web WordPress disponibile. Fiți înțelepți când selectați familia de fonturi, deoarece poate avea un impact pozitiv și negativ asupra cititorilor site-ului dvs.

5- Cele mai bune practici de utilizare a fonturilor Google pe un site web

Integrarea WordPress Fonturi Google nu este o știință de rachetă, dar există întotdeauna două moduri de a efectua orice sarcină - un mod bun și cel mai bun mod.

Să verificăm cele mai bune practici implicate în utilizarea fonturilor Google în WordPress.

- Limitarea greutăților fontului: selectarea setului complet de greutăți font este tentantă, dar are dezavantajele sale. Pentru fiecare variantă, API devine mai greu și necesită mai mult timp pentru a încărca setul complet de greutăți font.

Acest lucru este încărcat de obicei la începutul paginii web și, dacă nu este optimizat, poate încetini timpul inițial de încărcare a paginii dvs. web.

-Host Fonts Local: Font Google este o bibliotecă online care este găzduită în altă parte. Deși are un impact minim asupra performanței site-ului dvs., totuși, în caz de indisponibilitate, veți putea în continuare să serverați fonturile Google selectate dacă sunt găzduite local.

-Accesibilitatea este importantă: nu mai este o opțiune pentru optimizarea site-ului dvs. pentru persoanele cu deficiențe de vedere. Fonturile Google vă permit să vă stilizați fontul în modul cel mai convenabil pentru acest tip de vizitatori.

Folosiți contrastul care este ușor de citit pe majoritatea dimensiunilor și tipurilor de ecran și nu este greu pentru ochiul cititorului. Utilizarea culorilor foarte strălucitoare sau a culorilor foarte deschise nu este ideală. Alegeți culoarea și dimensiunea cele mai potrivite pentru majoritatea cititorilor.

Concluzie

Utilizarea Google Fonts în WordPress vă poate ajuta să schimbați rapid aspectul site-ului dvs. web. Indiferent dacă încercați să mergi pentru un site cu aspect profesional sau unul distractiv, șansele sunt fonturi Google are fontul perfect pentru tine.

V-am arătat cum puteți adăuga manual Google Fonts pe site-ul dvs. web folosind funcția wp_enqueue_style () și utilizând pluginul Easy Google Fonts. Sperăm că sunteți într-o poziție bună acum pentru a duce lucrurile mai departe.

Ați folosit vreodată o bibliotecă de fonturi pe site-ul dvs. WordPress? Ne-ar plăcea să aflăm de la dvs., așa că anunțați-ne comentând mai jos!