Cum să adăugați fonturi personalizate pe site-ul WordPress [2022]

Publicat: 2022-05-05

Știi care este partea centrală a designului tău web? Adăugarea unui font personalizat la un site web WordPress este pasul final pe care îl puteți face pentru a menține vizitatorii site-ului dvs. și pentru a îmbunătăți lizibilitatea site-ului. Fontul pe care îl alegeți pentru site reprezintă imaginea mărcii dvs. Să ne aprofundăm pentru a afla mai multe despre fonturile personalizate cu detaliu.

custom fonts

Chiar dacă veți găsi fonturi gratuite online, veți fi limitat să le utilizați pe baza compatibilității temei. De aceea, vom explica cum să adăugați fonturi personalizate în WordPress folosind moduri manuale și pluginuri WordPress.

De ce să folosiți fonturi personalizate și unde să le găsiți?

După cum am menționat mai sus, veți găsi numeroase site-uri de unde puteți descărca cu ușurință fonturi. De exemplu, Font Squirrel vine cu până la trei fonturi gratuite pe care le puteți utiliza. Google Fonts este o altă opțiune uimitoare, unde veți găsi peste 900 de fonturi din care să alegeți. În afară de asta, Edge Web Fonts vă poate oferi și o mare varietate de fonturi. Pentru uz personal, puteți opta pentru Fonts.com sau 1001 Fonturi gratuite .

DaFont este cea mai veche bibliotecă de fonturi care are peste 60.000 de fonturi din care puteți filtra fonturile dorite. Trebuie să descărcați fonturile alese și nu sunt ca integrarea Google Font. Un tip similar de bibliotecă de fonturi este UrbanFont , cu o gamă largă de fonturi creative și profitabile.

custom fonts

Adobe Fonts sau Typekit este o bibliotecă de fonturi foarte utilă pentru toți designerii web, deoarece are peste 1900 de fonturi disponibile. Chiar dacă vă abonați la contul gratuit, acesta oferă în continuare peste 200 de fonturi web.

Dacă doriți să închiriați fonturi lunar și să plătiți o taxă de abonament, puteți alege Fontstand . Oferă aproximativ 2000 de fonturi uimitoare și vă taxează lunar. La fel ca și această rețea de fonturi, este o altă bibliotecă de fonturi auto-găzduită, unde veți obține mai mult de 400 de familii de fonturi simultan și veți explora cu ușurință.

Cum să alegi cel mai bun font personalizat pentru un site web?

Deoarece știți deja resursele pentru găsirea fonturilor personalizate de dorit pentru WordPress, trebuie să știți cum să alegeți acum cele mai bune fonturi. Filtrarea fonturilor aleatoare va face procesul de selecție lung și neîndemânatic. În schimb, puteți încerca următorii pași în timp ce alegeți cel mai bun font personalizat pentru un site web WordPress. În acest blog, vom explora Fonturile Google pentru a alege cele mai bune fonturi și pentru a vedea cele mai bune practici în timp ce filtram prin toate fonturile.

custom fonts

Lista scurtă de fonturi care vă plac – În fontul Google puteți căuta cu ușurință fontul dorit în caseta de căutare și puteți seta categoria. Rezultatul căutării va fi modificat în funcție de ajustarea dvs. Puteți vedea fonturile în alfabete, numere numerice și alte formate.

Verificați detaliile fontului - Verificarea detaliilor fontului este importantă deoarece veți vedea toate stilurile și dimensiunile fonturilor disponibile dintr-o privire. Un avantaj uimitor pe care îl veți găsi cu fonturile Google este că afișează perechi populare cu acel font.

custom fonts

În timp ce verificați detaliile fontului, fiți atent și la formatul fontului. Pentru că nu toate fonturile acceptă toate sistemele de browser. Iată cea mai recentă listă de browsere și lista de format de font acceptate.

custom fonts

Sursa – https://www.w3schools.com/Css/css3_fonts.asp

Îmbogățiți-vă colecția de fonturi - Când ați terminat cu filtrarea fonturilor potrivite, puteți adăuga aceste fonturi la colecția dvs. doar făcând clic pe butonul „ Selectați acest font” .

Metode ușoare de a adăuga font personalizat pe site-ul WordPress

Am adunat unele dintre cele mai simple moduri de a adăuga fonturi personalizate pe site-ul dvs. într-un format pas cu pas. Să ne scufundăm și să vedem cum să o facem.

Cum să adăugați manual font personalizat în WordPress

Adăugarea manuală a fonturilor personalizate este cea mai înțeleaptă modalitate de a nu face site-ul dvs. să meargă încet. Deoarece ați explorat deja unele dintre dimensiunile fontului pentru a găsi fontul dorit, descărcați mai întâi fontul. Acum trebuie să încărcați fontul în contul dvs. de găzduire a site-ului web. Verificați ce temă utilizați pentru site-ul dvs. WordPress. Încărcați fișierul CSS al fontului dvs. în contul dvs. În timp ce descărcați fontul, nu uitați să extrageți fișierele din fișierul .zip.

Pentru a încărca fișierul cu fonturi, accesați directorul wp-content/themes/your-theme/fonts. Puteți crea un folder separat cu fonturi pentru confortul dvs. Încărcați fișierul utilizând File Manager în hPanel. Acum navigați la contul dvs. WordPress și faceți clic pe opțiunea Aspect . Alegeți Editorul de teme unde vi se va afișa fișierul style.css. Adăugați următorul cod în partea de jos a codului.

@font-face {

font-family: Aguafina Script-Regular;

src: url ( http ://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf);

greutatea fontului: normal;

}

Acum faceți clic pe butonul „Actualizare fișier” pentru a salva modificările. Rețineți că codul font-face încarcă fontul de fiecare dată când un vizitator vine pe site-ul dvs. Cu toate acestea, tipul de caractere nu a fost încă aplicat niciunui element. Trebuie să modificați același fișier style.css pentru a atribui un font unui anumit element. Următorul cod, de exemplu, ar face ca titlul site-ului nostru să utilizeze scriptul de font.

.site-title {

font-family: „Aguafina Script-Regular” , Arial, sans-serif;

}

Cum să setați fonturi personalizate folosind pluginuri WordPress

Pentru toți utilizatorii WordPress, utilizarea pluginurilor pentru fonturi este cea mai simplă modalitate de a seta fonturi personalizate. Aici am prezentat unele dintre cele mai simple și mai utile pluginuri de fonturi pentru a adăuga fonturi personalizate pe site-ul WordPress.

WP Google Fonts

custom fonts

Puteți utiliza fonturi personalizate și le puteți aplica anumitor elemente CSS utilizând pluginul WP Google Fonts . Instalați pluginul WP Google Fonts din directorul de pluginuri WordPress și utilizați tabloul de bord WordPress pentru a accesa panoul de control Google Font. Puteți alege fonturi și puteți ajusta opțiuni precum stilul fontului, elementele alocate și multe altele.

Plugin pentru fonturi

custom fonts

Fonts Plugin este o alternativă freemium la Easy Google Fonts care funcționează într-un mod similar, permițându-vă să integrați fără probleme Fonturile Google în paginile dvs. fără a fi nevoie să vă schimbați tema. De asemenea, funcționează cu Customizer, permițându-vă să încercați opțiuni alternative de font înainte de a le publica. Pluginul Fonturi are și integrare Adobe Fonts, ceea ce este un bonus. Pluginul Fonturi vă permite să utilizați biblioteca de fonturi Adobe și în materialul dvs.

Creați un site web atrăgător folosind fonturi personalizate

Lizibilitatea și eleganța textului tău au un impact asupra cât de mult le place vizitatorilor tăi să navigheze pe site-ul tău. Oricine poate alege acum dintr-un număr mare de fonturi pe care să le folosească pe site-ul său web. Nu există niciun motiv pentru care ați folosi vreun font vechi pe site-ul dvs. în zilele noastre. Personalizarea tipografiei WordPress este acum complet în controlul tău.

Dacă găsești acest blog captivant și util, abonează-te la blogul nostru pentru a citi mai multe bloguri ca acesta. Alăturați-vă comunității noastre pentru a vă împărtăși și părerile.