Cum se adaugă fonturi personalizate în WordPress

Doriți să adăugați fonturi personalizate în WordPress? Fonturile personalizate vă pot ajuta să vă împrospătați tema și să ieșiți în evidență. În acest articol, vă vom arăta cum să adăugați fonturi personalizate în WordPress folosind metoda Google Fonts, TypeKit și CSS3 @ Font-Face.

Utilizarea fonturilor personalizate în teme WordPress a devenit o tendință comună. De fapt, există câteva teme care vin complet încărcate cu sute de fonturi personalizate. Cu toate acestea, încărcarea prea multor fonturi poate încetini site-ul dvs. Web. De aceea vă vom arăta cum să încărcați în mod corespunzător fonturile personalizate, astfel încât acestea să nu încetinească site-ul dvs..

Dar, înainte de a ne uita la modul de a adăuga fonturi personalizate în WordPress, să aruncăm o privire la găsirea de fonturi personalizate.

Cum de a găsi fonturi personalizate de utilizat în WordPress

Fonturile erau scumpe, dar nu mai mult. Există multe locuri pentru a găsi mari fonturi gratuite de web, cum ar fi Google Fonts, Typekit, FontSquirrel și fonts.com.

Dacă nu știți cum să amestecați și să potriviți fonturile, încercați o pereche de fonturi. Ajută proiectanții la îmbinarea împreună a fonturilor frumoase Google.

Pe măsură ce alegeți fonturile dvs., rețineți că utilizarea prea multor fonturi personalizate va încetini site-ul dvs. Web. De aceea, ar trebui să selectați două fonturi și să le utilizați pe tot parcursul designului. Acest lucru va aduce, de asemenea, coerență la design-ul dvs..

Tutorial video

Dacă nu vă place videoclipul sau aveți nevoie de mai multe instrucțiuni, continuați să citiți.

Adăugarea de fonturi personalizate în WordPress din Fonturile Google

Google Fonts este cea mai mare, gratuită și cea mai frecvent utilizată bibliotecă de fonturi printre dezvoltatorii de site-uri Web. Există mai multe moduri în care puteți să adăugați și să utilizați Fonturi Google în WordPress.

Metoda 1: Adăugarea fonturilor personalizate utilizând pluginul simplu Google Fonts

Dacă doriți să adăugați și să utilizați Fonturi Google pe site-ul dvs., atunci această metodă este de departe cea mai ușoară și recomandată pentru începători.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Easy Google Fonts. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, puteți merge la Aspect »Customizer pagină. Aceasta va deschide interfața personalizată pentru tema live, unde veți vedea secțiunea Tipografie nouă.

Dacă faceți clic pe tipografie, veți afișa diferite secțiuni ale site-ului dvs. pe care puteți aplica Google Fonts. Faceți clic pe "Editați fontul" de sub secțiunea pe care doriți să o editați.

Sub secțiunea Familii de fonturi puteți alege orice font Google pe care doriți să îl utilizați pe site-ul dvs. Web. De asemenea, puteți alege stilul fontului, dimensiunea fontului, umplutura, marginea și multe altele.

În funcție de tema dvs., numărul secțiunilor de aici ar putea fi limitat și este posibil să nu puteți modifica direct selecția fonturilor pentru multe domenii diferite ale site-ului dvs..

Pentru a remedia acest lucru, pluginul vă permite, de asemenea, să creați propriile controale și să le utilizați pentru a schimba fonturile pe site-ul dvs. Web.

În primul rând, trebuie să vizitați Setări »Fonturi Google pagina și furnizați un nume pentru controlul fonturilor. Utilizați ceva care vă ajută să înțelegeți rapid unde veți folosi acest control al fonturilor.

Faceți clic pe butonul "Creare control font" și apoi vi se va cere să introduceți selectori CSS. Puteți adăuga elemente HTML pe care doriți să le vizați (de exemplu, h1, h2, p, blockquote) sau utilizați clase CSS. Puteți utiliza instrumentul Inspectați pentru a afla ce clase CSS sunt utilizate de zona specifică pe care doriți să o modificați.

Acum, faceți clic pe butonul "Salvați controlul fontului" pentru a stoca setările. Aveți posibilitatea să creați cât mai mulți controlori de caractere de care aveți nevoie pentru diferite secțiuni ale site-ului dvs. Web.

Pentru a utiliza aceste controlere de font, trebuie să vă deplasați Aspect »Customizer și faceți clic pe fila Tipografie.

Sub tipografie, veți vedea și opțiunea "Tipografie tipică". Dacă faceți clic pe acesta, se vor afișa controalele de fonturi personalizate pe care le-ați creat mai devreme. Acum puteți să faceți clic pe butonul de editare pentru a selecta fonturile și aspectul acestui control.

Nu uitați să faceți clic pe butonul Salvați sau publicați pentru a salva modificările.

Metoda 2: Adăugați manual Google Fonts în WordPress

Această metodă vă cere să adăugați codul la fișierele tematice WordPress. Dacă nu ați făcut acest lucru înainte, consultați ghidul nostru despre cum să copiați și să inserați codul în WordPress.

Mai întâi, accesați biblioteca de fonturi Google și selectați un font pe care doriți să-l utilizați. Apoi, dați clic pe butonul de utilizare rapidă de sub font.

Aceasta vă va duce la o altă pagină în care vi se va cere să alegeți stilurile pe care doriți să le utilizați. Ar trebui să selectați numai stilurile pe care credeți că le veți folosi efectiv.

După aceea, defilați puțin până când ajungeți la secțiunea de codificare a embedului. Trebuie să copiați codul de încorporare sub fila standard și să îl inserați în fișierul header.php al temei sau al temei copilului imediat după etichetă.

Asta-i tot ce ai adăugat cu succes un font Google personalizat în site-ul tău WordPress.

Puteți utiliza acest font în foaia de stil a temei:

 .h1 site-title font-family: 'Open Sans', Arial, sans-serif;  

Pentru instrucțiuni mai detaliate, consultați ghidul nostru despre cum să adăugați fonturi Google în teme WordPress.

Adăugarea de fonturi personalizate în WordPress utilizând Modelul de tip

Typekit este o altă resursă gratuită și premium pentru fonturi minunate pe care le puteți utiliza în proiectele de design. Ei au un abonament plătit, precum și un plan de abonament limitat gratuit pe care îl puteți utiliza.

Înscrieți-vă doar pentru un cont Typekit și creați un kit nou.

Apoi, trebuie să selectați un font din biblioteca Typekit și să îl adăugați la kit. După aceea, obțineți codul de încorporare pentru kitul dvs. și treceți la zona de administrare a site-ului dvs. WordPress.

Acum trebuie să instalați și să activați Fonturile Typekit pentru pluginul WordPress. La activare, pur și simplu vizitați Setări »Tipuri de fonturi și lipiți codul de încorporare în pagina de setări a pluginului.

Asta e tot, acum puteți utiliza fontul Typekit pe care l-ați selectat în foaia de stil a temei WordPress, astfel:

 h1. site-titlu font-family: "modesto-condensed", Arial, sans-serif;  

Pentru instrucțiuni mai detaliate consultați tutorialul nostru cum să adăugați o tipografie minunată în WordPress folosind Tipul de tip.

Adăugarea de fonturi personalizate în WordPress Utilizând CSS3 @ font-face

Cea mai directă modalitate de a adăuga fonturi personalizate în WordPress este adăugarea fonturilor utilizând CSS3 @ Font-face metodă. Această metodă vă permite să utilizați orice font pe care îl doriți pe site-ul dvs. Web.

Primul lucru pe care trebuie să-l faceți este să descărcați fontul pe care îl doriți într-un format web. Dacă nu aveți formatul web pentru fontul dvs., îl puteți converti utilizând generatorul FontSquirrel Webfont.

Odată ce aveți fișierele webfont, va trebui să le încărcați pe serverul de gazduire web.

Cel mai bun loc pentru a încărca fonturile se află într-un nou director "fonturi" din directorul temei sau al temei copilului.

Puteți utiliza FTP sau Manager de fișiere al cPanel pentru a încărca fontul.

Odată ce ați încărcat fontul, trebuie să încărcați fontul în foaia de stil a temei utilizând regula CSS3 @ font-face astfel:

 @ font-face font-family: Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight: normal;  

Nu uitați să înlocuiți familia de fonturi și adresa URL cu propria dvs..

Apoi, puteți utiliza acel font oriunde în foaia de stil a temei, astfel:

 .h1 site-titlu font-familie: "Arvo", Arial, sans-serif;  

Încărcarea fonturilor direct utilizând CSS3 @ font-face nu este întotdeauna cea mai bună soluție. Dacă utilizați un font din Google Fonts sau Typekit, atunci cel mai bine este să difuzați fonturile direct de pe serverul lor pentru o performanță optimă.

Asta e tot, sperăm că acest articol v-a ajutat să adăugați fonturi personalizate în WordPress. Ați putea dori, de asemenea, să verificați ghidul nostru cu privire la modul de utilizare a fonturilor de pictograme în WordPress și cum să modificați dimensiunea fontului în WordPress.

Dacă v-ați plăcut acest articol, vă rugăm să vă abonați la tutorialele video YouTube pentru canalul YouTube pentru WordPress. Ne puteți găsi pe Twitter și pe Facebook.