Cum să adăugați fonturi personalizate la WordPress

Dacă doriți ca site-ul dvs. să iasă cu adevărat în evidență din mulțime, atunci folosirea fonturilor personalizate vă va ajuta să realizați acest lucru. Există mii de fonturi personalizate frumoase din care să alegeți și, selectând pe cele potrivite pentru proiectul dvs., veți putea crea un site web care nu este doar unic, dar care reflectă și stilul și brandingul dvs. Deci, cum adăugați fonturi personalizate la WordPress?

În acest articol, vom acoperi tot ce trebuie să știți despre aplicarea fonturilor personalizate pe site-ul dvs. web. Aceasta include:

• Unde găsiți fonturi personalizate
• Cum să adăugați fonturi Google pe site-ul dvs. folosind pluginul Easy Google Fonts
• Adăugarea manuală a fonturilor Google pe site-ul dvs. (nu este necesar niciun plugin)
• Adăugarea fonturilor Adobe la WordPress
• Cum să adăugați orice font personalizat în spațiul dvs. web

Ești gata să începi?

Unde puteți găsi fonturi personalizate?

În zilele noastre, multe teme premium WordPress sunt livrate cu o multitudine de fonturi personalizate. Cu toate acestea, acestea pot crește adesea umflarea temei și pot influența timpii de încărcare a site-ului dvs. web mai mult decât ați crede. Veți descoperi, de asemenea, că de fapt utilizați doar câteva fonturi personalizate cel mult, astfel încât majoritatea fonturilor pe care le oferă tema dvs. nu vor fi niciodată necesare.

Prin urmare, vă recomandăm să alegeți o temă WordPress ușoară, la care puteți adăuga fonturi personalizate atunci când este necesar. Există o serie de locuri în care puteți găsi fonturile personalizate potrivite pentru site-ul dvs. web. Hai să aruncăm o privire…

• Google Fonts – Cea mai populară alegere, Google Fonts, oferă un director gratuit de peste 900 de fonturi de designer open source care pot fi folosite în peste 135 de limbi. Aceste fonturi pot fi răsfoite rapid și apoi integrate perfect în orice proiect de web design.
• Adobe Fonts (cunoscut anterior sub numele de Typekit) – Deși Typekit a oferit atât versiuni gratuite, cât și versiuni premium ale serviciului său, acum redenumit Adobe Fonts, va trebui să vă înscrieți la pachetul plătit Adobe Creative Cloud pentru a accesa această resursă. Există mii de fonturi din care să alegeți, toate fonturile sunt licențiate pentru uz personal și comercial și, de asemenea, puteți selecta din pachetele de fonturi tematice de proiect, care sunt perfecte pentru cei cărora le lipsește un ochi pentru design.
• Font Squirrel – În biblioteca Font Squirrel veți găsi un amestec de fonturi gratuite și premium, acestea din urmă care pot fi cumpărate ca achiziții unice. Din nou, puteți alege dintre mii de fonturi de înaltă calitate, majoritatea care sunt gratuite și cu licență comercială.
• Fonts.com – Oferind peste 150.000 de produse de fonturi desktop și web, Fonts.com conține o colecție impresionantă de fonturi personalizate premium. Veți găsi, de asemenea, un sortiment de articole interesante pe blogul Font.com, împărtășind sfaturi și tehnici tipografice.
• FontPair – Oferind o experiență ușor diferită față de celelalte resurse, FontPair cuplează fonturile din Google Fonts, ajutându-vă să găsiți combinațiile potrivite de fonturi pentru site-ul dvs.

Deci, acum știți unde să găsiți fonturi personalizate. Să ne uităm în continuare la cum să adăugați fonturi Google pe site-ul dvs. WordPress.

Cum să adăugați fonturi Google la WordPress utilizând pluginul Fonturi Google Easy

Deoarece Google Fonts este cea mai populară resursă pentru fonturi personalizate, vom începe prin a vedea cum să adăugați un font din această bibliotecă pe site-ul dvs. web. Există mai multe moduri de a face acest lucru, dar cea mai rapidă și mai ușoară opțiune este să utilizați pluginul WordPress Easy Google Fonts.

Easy Google Fonts este un plugin gratuit WordPress care vă va permite să inserați fonturi personalizate în site-ul dvs. WordPress, fără a fi nevoie să atingeți o linie de cod. Integrarea cu personalizarea WordPress, acest plugin vă va permite să inserați și să utilizați fonturi Google pe front-end-ul site-ului dvs. în timp real, fără a fi nevoie să reîmprospătați pagina.

Deci, să aflăm acum cum să instalăm și să folosiți acest plugin.

Pasul 1: Instalați Easy Google Fonts

Pentru a începe cu Easy Google Fonts, deschideți tabloul de bord WordPress și selectați Plugin-uri > Adăugați nou din meniu.

Apoi introduceți Easy Google Fonts în funcția de căutare și, odată ce pluginul a fost preluat, faceți clic pe Instalare > Activare .

Veți găsi acum Fonturi Google Easy în Setări din meniul WordPress.

Pasul 2: Editați fonturile în Personalizatorul WordPress

După ce ați instalat Easy Google Fonts, din meniul WordPress selectați Aspect > Personalizare . Site-ul dvs. web se va deschide acum pe front-end, unde veți găsi o secțiune Tipografie a fost adăugată la personalizare.

Faceți clic pe Tipografie. Puteți selecta apoi diferitele zone ale site-ului dvs. în care doriți să aplicați un font Google personalizat (de exemplu, paragraf, antet 2, antet 3 etc.).

Sub secțiunea pe care doriți să o editați, faceți clic pe Editați fontul . Apoi puteți selecta fontul pe care doriți să îl utilizați – veți putea previzualiza modul în care arată fiecare font direct pe site-ul dvs. web.

Nu numai că puteți modifica tipul fontului, dar puteți schimba și culoarea, dimensiunea, poziționarea și multe altele. După ce sunteți mulțumit de noul font, faceți clic pe Publicați .

Pasul 3: Creați comenzi personalizate pentru font

Controalele implicite ușoare Google Fonts vă vor permite să modificați fonturile secțiunilor de paragraf și anteturilor 1-6. Cu toate acestea, nu toate elementele temei dvs. pot fi gestionate de controalele implicite ale fontului.

Dacă doriți să modificați un alt element al temei dvs. (altul decât un paragraf sau un antet), atunci va trebui să vă creați propriile controale personalizate pentru font. Deși Easy Font Control vă permite să faceți acest lucru cu ușurință, veți avea nevoie totuși de o înțelegere de bază a selectoarelor CSS.

Pentru a adăuga comenzi personalizate pentru font, selectați Setări > Fonturi Google din tabloul de bord WordPress. Apoi, în fila Editați controlul fonturilor , acordați noului grup de control al fonturilor un nume adecvat, apoi selectați Creare control font . Aici vom crea un control al fontului pentru ghilimelele...

Sub Adăugați selectoare CSS , adăugați selectorul CSS pentru elementul pe care doriți să îl gestionați. Puteți adăuga mai mult de un element dacă doriți. Apoi selectați Salvare control font .

Înapoi în Personalizatorul de pe front-end-ul site-ului dvs., sub Tipografie , veți găsi acum opțiunea Tipografie temă, unde puteți accesa noile comenzi personalizate.

Acum puteți selecta un nou font personalizat pentru elementul personalizat specific și puteți modifica orice alte setări de Aspect și Poziționare .

Easy Custom Fonts este o opțiune excelentă pentru oricine dorește să adauge fonturi personalizate la WordPress de la Google. Cu toate acestea, dacă preferați, puteți adăuga manual fonturi Google pe site-ul dvs. folosind doar cod, fără plugin. Să aflăm cum să facem asta...

Cum să adăugați manual fonturi Google la WordPress (nu este necesar niciun plugin)

Dacă preferați să adăugați fonturi Google la WordPress manual, atunci veți avea nevoie de cunoștințe de bază de codare.

Pasul 1: Selectați un font Google

Pentru a începe, deschideți Google Fonts și selectați tipul de font personalizat pe care doriți să îl adăugați pe site-ul dvs. web.

Apoi, pe pagina fontului, faceți clic pe Selectați acest font . Aici am selectat fontul Indie Flower.

O fereastră pop-up va apărea acum pe ecran. În funcție de fontul pe care l-ați selectat, veți putea accesa o selecție de opțiuni de personalizare pentru greutățile și stilurile fontului, precum și să vizualizați informațiile de încorporare.

Pasul 2: Încorporați codul fontului personalizat în site-ul dvs. WordPress

În continuare, va trebui să copiați codul Embed (vezi fereastra de mai sus) și să-l inserați în secțiunea <head> a temei dvs. WordPress. Cel mai simplu mod de a face acest lucru este să instalați pluginul gratuit WordPress Insert Headers and Footers. Folosind acest plugin, puteți adăuga rapid cod pe site-ul dvs. web fără a fi nevoie să editați fișierele tematice.

După instalare, deschideți setările pluginului selectând Setări > Inserați antet și subsol din tabloul de bord WordPress. Apoi, trebuie să adăugați codul de încorporare Google Fonts în secțiunea Antet.

De asemenea, dacă preferați, puteți edita fișierul header.php al temei copilului.

Pasul 3: Aplicați noul font folosind CSS

După ce ați adăugat codul HTML pentru fontul dvs. personalizat pe site-ul dvs. web, acum puteți utiliza CSS pentru a aplica noul font personalizat. În fereastra pop-up Fonturi Google, veți găsi regulile CSS care sunt specifice noului font.

Înapoi în Personalizatorul de pe partea live a site-ului dvs., selectați CSS suplimentar. Aici puteți introduce codul CSS pentru a personaliza fonturile de pe site-ul dvs. Mai jos puteți vedea că am aplicat codul CSS Indie Flower la secțiunile de antet 2 și paragraf...

Personalizatorul vă va afișa modificările fontului în timp real și, dacă sunteți mulțumit de rezultate, faceți clic pe Publicare .

Cum să adăugați fonturi Adobe la WordPress

Dacă v-ați înscris pentru pachetul Adobe Premium Creative Cloud, atunci veți putea adăuga oricare dintre fonturile sale personalizate pe site-ul dvs. WordPress. Acest proces este foarte asemănător cu cel de adăugare manuală a fonturilor Google pe site-ul dvs. Să aruncăm o privire rapidă.

Pasul 1: Alegeți un font Adobe

În primul rând, va trebui să răsfoiți biblioteca extinsă de fonturi Adobe și să alegeți un font(uri) care să se potrivească cu proiectul dvs. După ce ați făcut o selecție, faceți clic pe pictograma </> pentru a adăuga fontul la un nou proiect web .

Acum vi se va cere să denumiți proiectul dvs. web, precum și să utilizați casetele de selectare pentru a selecta greutățile și stilurile fonturilor pe care doriți să le includeți. Apoi selectați Creare proiect .

Pasul 2: Încorporați codul fontului Adobe în site-ul dvs. WordPress

Următorul pas este să încorporați codul pe care Adobe îl furnizează pentru fontul ales de dvs. în site-ul dvs. WordPress.

Acesta urmează exact același proces ca și încorporarea codului Google Fonts. Pur și simplu încorporați codul în eticheta <head> de pe site-ul dvs. web sau utilizați pluginul WordPress Insert Headers and Footers (după cum sa discutat anterior).

Pasul 3: Aplicați noul font folosind CSS

Din nou, la fel ca Google Fonts, acum puteți aplica noul font personalizat Adobe folosind regulile CSS. În tabloul de bord Adobe, pagina Web Project va lista numele familiei de fonturi CSS, precum și stilul fontului și greutatea numerică, pentru fiecare tip de font pe care l-ați selectat.

Înapoi pe site-ul dvs. WordPress, aceste reguli CSS pot fi folosite în Personalizator sub CSS suplimentar.

Așadar, acum am explicat cum să adăugați fonturi personalizate la WordPress folosind foarte popularele fonturi Google gratuite, precum și resursa premium impresionantă Adobe Fonts.

Cu toate acestea, ultima opțiune pe care o vom discuta vă permite să adăugați orice font personalizat pe site-ul dvs., încărcându-l pe serverul site-ului dvs. Să aflăm mai multe.

Cum să adăugați un font personalizat în spațiul dvs. web

Adăugarea unui font personalizat în spațiul dvs. web este relativ simplă, dar din nou, veți avea nevoie de o înțelegere de bază a CSS pentru a aplica fontul pe site-ul dvs. web.

Pasul 1: Descărcați un font personalizat

După cum am menționat la începutul acestui articol, există numeroase resurse în care puteți selecta fonturi personalizate gratuite sau premium pentru a le utiliza pe site-ul dvs. web. Când alegeți un font personalizat la adăugarea la serverul dvs., asigurați-vă că aveți dreptul de a-l folosi și că este descărcabil.

Aici am descărcat fontul personalizat gratuit Milkshake de la Squirrel Fonts.

Este important să descărcați fontul personalizat într-un format webfont. Formatul de container pentru fonturi web WOFF se bucură de cea mai mare compatibilitate între browsere, dar Google recomandă furnizarea mai multor formate pentru a oferi o experiență consecventă utilizatorilor pe toate dispozitivele.

Dacă trebuie să convertiți fontul personalizat într-un alt format, atunci Squirrel Font oferă un instrument gratuit Webfont Generator care vă va permite să faceți acest lucru.

Pasul 2: Încărcați fontul personalizat pe serverul dvs

Următorul pas este să încărcați fontul personalizat pe server. Pentru a face acest lucru, deschideți Managerul de fișiere în cPanelul site-ului dvs.

Apoi, în dosarul cu teme active, creați un dosar nou numit Fonturi și încărcați fontul personalizat aici.

Dacă aveți mai multe formate ale fontului, încărcați-le pe toate în folderul Fonturi . Fontul dvs. personalizat a fost acum adăugat în spațiul dvs. web.

Pasul 3: Folosiți CSS pentru a aplica fontul personalizat pe site-ul dvs. web

Acum trebuie să aplicați fontul personalizat pe site-ul dvs. web. Pentru început, trebuie să încărcați fontul în foaia de stil a temei. Pentru a face acest lucru, deschideți WordPress Customizer și sub CSS suplimentar adăugați acest cod:

 @font-face {
    font-family: Milkshake;
    src: url ("https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff")
         format("woff");
}

Important, asigurați-vă că schimbați numele fontului și adresa URL (copiați adresa URL pentru fișierul fontului de pe serverul dvs.).

Apoi puteți continua și utiliza regulile CSS pentru a actualiza fonturile de pe site-ul dvs. Iată un exemplu despre cum să aplicați fontul personalizat la antetul 3 și la secțiunile de paragraf:

După ce sunteți mulțumit de modul în care arată noul font personalizat pe site-ul dvs. web, faceți clic pe Publicați .

Gânduri finale despre cum să adăugați fonturi personalizate la WordPress

După cum puteți vedea, dacă sunteți în căutarea unui font personalizat frumos și care atrage atenția, atunci există numeroase resurse care vă vor permite să găsiți fontul perfect pentru proiectul dvs. Și mai mult, acum sunteți înarmat cu cunoștințele despre cum să adăugați cu succes fonturi personalizate la WordPress. Deci, ce fonturi personalizate veți alege?

Aveți întrebări despre cum să adăugați fonturi personalizate la WordPress? Vă rugăm să întrebați în comentariile de mai jos...