3 moduri diferite de a adăuga fonturi personalizate la tema site-ului dvs. WordPress

Publicat: 2020-05-26

Există multe moduri interesante și personalizabile prin care puteți face site-ul dvs. WordPress să arate mai unic și mai atrăgător din punct de vedere vizual. Una dintre modalități este să adăugați fonturi personalizate pe site-ul dvs. WordPress. Aruncă o privire la unele dintre site-urile web ale concurenților tăi. Ele pot emula același ton și stil pe care sperați să le creați cu propriul site WordPress. Acordați atenție utilizării fonturilor. Multe site-uri de succes tind să folosească o mână de fonturi atent selectate, care sunt utilizate în mod constant pe întregul site.

Există atât de multe fonturi personalizate disponibile online gratuit pe care le puteți adăuga cu ușurință pe propriul dvs. site. După ce găsiți fonturile potrivite, va trebui să știți cum să le aplicați pe site-ul dvs. web. Există o serie de metode pe care le puteți încerca pentru a realiza acest lucru.

În primul rând, găsirea fontului potrivit; există nenumărate site-uri care oferă mii de fonturi gratuite pe care să le descărcați. Încercați Fonturi Google, TemplateMonster, MyFonts, FontSpring, Cufonfonts, Dafont, Font Squirrel, Edge Web Fonts, 1001 fonturi gratuite, Fonts.com.

Pe scurt, există două moduri principale de a adăuga fonturi personalizate pe site-ul dvs. WordPress: manual sau cu pluginuri.

Cuprins arată
  • Adăugați manual fonturi personalizate la tema site-ului dvs. WordPress
  • Utilizați pluginuri pentru a adăuga fonturi personalizate la tema site-ului dvs. WordPress
  • În cele din urmă, încercați să utilizați teme

Adăugați manual fonturi personalizate la tema site-ului dvs. WordPress

tipografie-fonturi-personaje-litere-design

Adăugarea manuală a fonturilor personalizate la WordPress poate fi benefică dacă preferați să nu riscați să supraîncărcați site-ul dvs. WordPress cu prea multe plugin-uri. Acest lucru poate fi realizat prin editarea directivei @font-face. Acest lucru vă permite să conectați mai multe fonturi de orice format la site-ul dvs.

Aceasta implică următorii pași:

Pasul 1

Mai întâi, descărcați fonturile personalizate alese de pe orice site web pe care l-ați găsit cel mai util. Odată ce fișierul este salvat pe computer, extrageți această arhivă .zip.

Pasul 2

După aceasta, puteți încărca acest fișier cu fonturi în serverul dvs. de găzduire WordPress în directorul „wp-content/themes/your-theme-folder/fonts”. Dacă nu ați configurat deja un folder desemnat pentru fonturile dvs. personalizate, creați unul și salvați-l acolo.

Pasul 3

Apoi, mergeți la zona de administrare a WordPress. Selectați Aspect, apoi accesați Editorul de teme. În acest moment, veți vedea fișierul style.css al temei pe ecran. Sub aceasta, va trebui să adăugați această secțiune de cod:

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

Nu uitați să înlocuiți „URL” și „font-family” din cod cu valorile adecvate pentru a corespunde cu fontul ales. Ar trebui să lipiți și această secțiune de cod la începutul fișierului CSS, dar după comentarea temei.

Pasul 4

În cele din urmă, asigurați-vă că faceți clic pe butonul Actualizează fișierul important. Acest lucru vă asigură că modificările sunt salvate corect înainte de a părăsi pagina.

Pasul 5

După aceasta, puteți utiliza cu ușurință fontul oriunde în care doriți să-l aplicați în foaia de stil a temei. Folosind următorul cod:

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

Acum că ați editat acest cod de font, ori de câte ori cineva intră pe site-ul dvs., fontul se va încărca. Dar nu ați aplicat încă niciun element anume din pagină. Pentru a face acest lucru, trebuie să faceți încă o modificare finală a fișierului style.css corespunzător pe care tocmai îl accesați. Va trebui să introduceți cod ca următorul în fișier:

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }
Recomandat pentru tine: Ghid pentru începători: Cum să instalezi o temă WordPress?

Notă rapidă:

Nu uitați, ca și înainte, să editați valoarea familiei de fonturi pentru a fi adecvată fontului pe care îl utilizați.

Dacă, de exemplu, utilizați fonturi personalizate din Google Fonts, veți vedea că există o filă numită @import, care vă oferă codul relevant pentru a copia și lipi pur și simplu în fișierul style.css al temei. Acest lucru poate face întregul proces mult mai simplu dacă nu vă simțiți confortabil să vă ocupați de prea multă codare.

Cu toate acestea, aceasta nu mai este o metodă foarte recomandată. A întâmpinat unele probleme de performanță, împiedicând browserele să descarce mai multe foi de stil în același timp. Acest lucru are ca rezultat o încărcare mai lentă a paginilor în cele din urmă. Prin urmare, țineți cont de acest lucru atunci când alegeți fonturile și metodele de utilizare a acestora.

Pe de altă parte, instalarea manuală a fonturilor personalizate prin CSS vă permite să conectați fonturi dintr-o gamă largă de formate, inclusiv SVG, WOFF, TTF și OTF. Această metodă vă permite, de asemenea, să lucrați fără a fi nevoie să vă bazați pe servicii terțe. Fișierele dvs. cu fonturi vor fi localizate pe serverul dvs. Acesta este cel mai direct mod de a adăuga fonturi personalizate la WordPress.

Utilizați pluginuri pentru a adăuga fonturi personalizate la tema site-ului dvs. WordPress

Fonturi Photoshop GRATUIT! Recomandate

Mulți oameni aleg să folosească pluginuri pentru a-și include fonturile personalizate pe site-urile lor WordPress, deoarece în multe feluri poate fi cea mai simplă metodă de a face acest lucru. Acest lucru este valabil mai ales dacă nu doriți să vă ocupați de codarea CSS. Google Fonts este o alegere populară, în mare parte pentru că poate fi utilizat cu ușurință în tandem cu pluginul WordPress. Cele mai bune două opțiuni pentru tine sunt Easy Google Fonts și Google Fonts Typography. Odată ce ați activat oricare dintre aceste plugin-uri, veți putea accesa cu ușurință întregul catalog de fonturi Google Fonts pe care să le adăugați în paginile dvs. fără a fi nevoie să vă ocupați de niciun cod complicat.

Utilizarea Fonturilor Google este cea mai simplă modalitate de a face acest lucru și vă puteți previzualiza modificările și fonturile personalizate în timp real pe ecran.

În funcție de fișierele cu fonturi pe care doriți să le utilizați și dacă intenționați să utilizați un singur depozit sau nu, vă recomandăm să luați în considerare utilizarea unui plugin alternativ, cum ar fi pluginul Fonturi personalizate.

Pasul 1

Odată ce ați instalat pluginul dorit și l-ați activat, ați ajuns la Aspect, apoi faceți clic pe pagina Personalizator, care va deschide pagina de interfață de personalizare a temei WordPress live. Aici veți vedea fila Tipografie, care vă va afișa fiecare secțiune a propriului site la care puteți aplica propriile fonturi personalizate.

Pasul 2

Odată ce ați deschis această pagină, veți putea face clic pe butonul Editare font din secțiunea paginii pe care doriți să începeți editarea. Apoi puteți lucra prin diferitele sub-secțiuni, selectând stilul fontului, dimensiunea, marginea etc. – aceste secțiuni vor varia în funcție de tema pe care o utilizați.

Tema dvs. ar putea însemna, de asemenea, că nu veți putea edita direct selecția dvs. de font pentru diferite secțiuni ale site-ului dvs. Există, totuși, o soluție simplă pentru această problemă: pur și simplu accesați Setări, apoi Fonturi Google, unde vă puteți crea propriile comenzi pentru fonturi. Pentru a face acest lucru, introduceți pur și simplu un Nume de control în casetă și selectați selectoare CSS. Acest lucru vă permite să adăugați orice elemente HTML pe care doriți să le vizați pentru acest font. După ce ați introdus aceste informații, asigurați-vă că ați salvat modificările făcând clic pe butonul Salvare control font, astfel încât setările dvs. să fie complet actualizate. Apoi puteți continua să creați câte controale personalizate pentru fonturi aveți nevoie pentru fiecare secțiune diferită a site-ului dvs. WordPress.

Pasul 3

Pentru a utiliza aceste noi controlere de fonturi după ce le-ați creat, mergeți înapoi la secțiunea Aspect, faceți clic pe Personalizator, apoi faceți clic pe fila Tipografie. După aceasta, veți vedea opțiunea etichetată Tipografie temă - când faceți clic pe aceasta, veți putea accesa controalele personalizate ale fonturilor prin simpla selectare a butonului Editare, astfel încât să puteți alege fonturile dorite și aspectul dorit pentru acest anume. Control. Încă o dată, nu uitați să salvați modificările, făcând clic pe butonul Publicați sau Salvați pentru a vă actualiza site-ul.

Notă rapidă:

Alte pluginuri grozave de fonturi WordPress personalizate pe care le-am recomanda sunt Custom Font Uploader și Use Any Font – dar există nenumărate altele din care să alegeți, așa că explorați opțiunile înainte de a vă decide pe cel pe care doriți să îl utilizați.

S-ar putea să vă placă și: Cele mai bine vândute 20 de teme WordPress de micronișă.

În cele din urmă, încercați să utilizați teme

Tutorial de șablon de teme WordPress

Pe lângă aceste două metode principale de adăugare a fontului și tipografiei personalizate pe site-ul dvs. WordPress, puteți utiliza și temele din care puteți alege. Există numeroase teme disponibile, multe dintre care vin cu opțiuni încorporate care vă permit să personalizați fonturile instalate. Procesul pentru a face acest lucru va varia în funcție de tema pe care o utilizați. Prin urmare, asigurați-vă că căutați ghidul potrivit pentru tema dvs. Temele WordPress premium de înaltă calitate vor oferi, de asemenea, documente disponibile pentru acces online, care oferă instrucțiuni pentru adăugarea de fonturi personalizate la acea anumită temă.

Elementele vizuale și de design sunt, fără îndoială, unul dintre cei mai importanți factori în crearea unui site web eficient, care va atrage atenția fiecărei persoane care îl vizitează. Una dintre cele mai mari caracteristici din acest domeniu este utilizarea fonturilor. Indiferent de modalitatea în care alegeți să adăugați fonturi personalizate pe site-ul dvs. WordPress, ar trebui să găsiți și să utilizați cele mai potrivite fonturi pentru stilul, publicul, conținutul, tema și tonul întregului site web și al mărcii dvs.

 Acest articol este scris de Beatrice Beard. Beatrice este copywriter profesionistă la Academic Brits, care este specializată într-o gamă impresionantă de subiecte și domenii. Beatrice este întotdeauna deschisă să împărtășească experiența ei personală și să ofere sfaturi de specialitate scriitorilor începători, care descoperă toate provocările și particularitățile creării de conținut de înaltă calitate care se vând cu adevărat.