Cum să adăugați fonturi personalizate pe site-ul dvs. WordPress

Cum să adăugați fonturi personalizate pe site-ul dvs. WordPress

De ce face blogul tău plictisitor folosind fonturi standard? Permiteți-vă blogului dvs. să vorbească despre personalitatea voastră vibrantă și subiectele pe care le abordați cu o mare varietate de fonturi personalizate. Fonturile personalizate sunt o caracteristică frumoasă care permite blogului tău să arate preferabil celorlalți.


Hai sa recunoastem; cu toții iubim blogurile și site-urile cu fonturi potrivite. Ele nu numai că decorează site-ul, dar ajută la atragerea utilizatorului către conținutul tău. Cu toate acestea, alegerea fonturilor WordPress standard este limitată și depinde de tema pe care o utilizați. Vestea bună este că le puteți adăuga manual sau cu pluginuri specializate.

Și aici, apar două întrebări – unde să obțineți fonturi personalizate pentru WordPress și cum să instalați fonturi personalizate pe site-ul dvs. WordPress.

Să aflăm.

 De ce ar trebui să folosesc fonturi personalizate?

Au trecut vremurile când Times New Roman și Georgia au fost considerate singurele fonturi pentru textele de pe site-uri. În ultimii ani, spațiul fonturilor s-a schimbat complet odată cu apariția fonturilor, cum ar fi fonturile Google și altele.

Astăzi, există sute de fonturi gratuite, ajutoare de informare și instruire și resurse concepute pentru proiectare, disponibile pe Internet. Spre deosebire de Adobe Illustrator, Photoshop și alte aplicații clasice, WordPress nu vă oferă un control complet asupra fonturilor în mod implicit. Doar unele teme aleg să sprijine și să utilizeze fonturi personalizate.

Prin urmare, în această postare, veți învăța cum să găsiți fonturi personalizate adecvate și cum să le utilizați pe site-ul dvs. WordPress.

Importanța utilizării fonturilor personalizate

De ce să schimbați fonturile, liniuța între cuvinte, spațiul de linie, distanțarea literelor sau saturația fontului, întrebați? Fie că este posibil, unele studii dovedesc asta tipografia îmbunătățește înțelegerea lecturii.

Depinde mult de construcția fonturilor. La nivel conștient și subconștient – toată lumea evaluează conținutul unei pagini web prin design.

Designul fontului afectează cititorii, chiar dacă nu-i acordă atenție. A abandona designul fontului înseamnă a abandona dezvoltarea în sine! Starea de spirit a cititorului depinde de ea. Fontul ușurează citirea sau îi obligă pe utilizatori să părăsească pagina.

Toate browserele web includ un set de fonturi implicite. Aceasta înseamnă că dacă fontul nu este specificat în CSS-ul paginii, atunci va fi utilizată versiunea standard. Puteți utiliza întotdeauna fonturile implicite, dar acestea complică munca utilizatorilor. Acesta este motivul pentru care este esențial să folosiți un font personalizat. Dacă tema dvs. nu vă oferă opțiuni pentru schimbarea fontului, multe site-uri web și instrumente vă pot ajuta.

Alternative fonturi Google

Unde să găsiți fonturi personalizate

Mulți dintre voi știți despre fonturile gratuite Google. Există multe alte site-uri unde puteți găsi fonturi frumoase. Unele dintre ele sunt gratuite pentru uz personal. Dacă aveți nevoie pentru utilizare comercială, atunci aveți nevoie de o licență. Fonturile Google și Fonturile Adobe Edge sunt gratuite. De aceea nu sunt atât de unici. Și acest lucru nu ni se potrivește.

Iată câteva alte resurse pentru găsirea fonturilor pentru uz comercial și gratuit:

  1. Template Monster – Pe site-ul de pe piața TemplateMonster, veți găsi totul pentru designul web de care aveți nevoie. Există, de asemenea, multe fonturi și pachete de fonturi pentru uz personal la un preț mic. De asemenea, sunt prezentate la UN kit de dezvoltare web. Colecția este uriașă și creativă. Pentru a vă ajuta să alegeți, toate fonturile prezentate pe broșuri sau cadre. Fiecare font are și o licență comercială.
  2. fonturile_mele – MyFonts oferă în prezent cea mai mare selecție de fonturi din lume. Cu toate acestea, prețurile de aici se află și în segmentul superior. Deci, dacă aveți un buget restrâns, s-ar putea să nu fie pentru dvs..
  3. FontSpring – Fontspring vinde fonturi de lux pentru uz comercial. Dar în aproape orice familie 1-2 fonturi gratuite care pot fi utilizate în scopuri personale. În plus, există o secțiune separată cu fonturi gratuite. Colecția este vibran. Dar va trebui să studiați cu atenție informațiile de licență pentru un anumit font înainte de descărcare.
  4. Cufonfonts – Este, de asemenea, o colecție extinsă de diferite fonturi. Selectați oricare și veți vedea o pagină cu informații detaliate despre aceasta. Există o mulțime de fonturi gratuite și sunt împărțite în secțiuni individuale. Sistemul de sortare pe CufonFonts este destul de flexibil și convenabil. De asemenea, suportul Webfont este inclus.
  5. Dafont – O altă colecție accesibilă de 3.500 de fonturi gratuite. Cele mai multe dintre ele sunt proiectate numai pentru uz personal. O caracteristică frumoasă DaFont este un sistem de categorii. Puteți selecta fonturi în stil de benzi desenate, jocuri video, vintage sau stilizate ca personaje japoneze.

Alegerea fonturilor este foarte tentantă, deoarece toate sunt frumoase. Dar nu ar trebui să alegeți multe. Utilizare nu mai mult de două fonturi pe site. Atunci aspectul site-ului dvs. web va fi consecvent. După ce ați ales fonturile, asigurați-vă că descărcați fișierele pentru fiecare stil pe care îl veți utiliza (normal, îndrăzneț, italic, etc.).

După ce ați selectat fontul potrivit pentru site, vom afla cum să îl adăugați.

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

Există câteva moduri de a adăuga fonturi pe un site WordPress:

  1. Plugin-uri: în acest caz, diferite plugin-uri WordPress sunt utilizate pentru a facilita procesul.
  2. Manual: folosind această metodă, aveți nevoie de o încărcare descărcată pe site și editați fișierul CSS.
  3. tematică: multe teme populare includ opțiuni încorporate pentru a vă personaliza fonturile (notă – nu vom acoperi această opțiune, deoarece procesul va varia în funcție de tema pe care o utilizați, dar teme premium de calitate, precum tema Total WordPress, vor oferi online documente pe care le puteți urmări cu ușurință – ca acest ghid pentru a adăuga fonturi personalizate la Total)

Opțiunea 1 – Modificați fonturile WordPress cu pluginuri

Dacă nu ne interesează modificările globale, putem instala plugin-uri WordPress care vor schimba fonturile de pe site-ul dvs..

Caracteristicile pluginurilor personalizate pentru fonturi

Software-ul open-source are un avantaj pentru interesul comunității, iar WordPress are și acest avantaj. Mai multe plugin-uri WordPress vă permit să adăugați fonturi personalizate. Cum să alegi un plugin adecvat cu atât de multe? Care sunt caracteristicile pluginurilor personalizate pentru fonturi?

Iată câteva puncte de luat în considerare:

  • Posibilitatea de a utiliza fonturi personalizate
  • Posibilitatea de a utiliza mai mult de un font
  • Anteturile și componentele țintă
  • Bonus: posibilitatea de a schimba setările de fonturi de la editorul vizual

Asta e tot. Prima caracteristică de pe listă este foarte importantă. Puteți descărca oricând fonturi de pe site-uri precum DaFont, Font Squirrel etc., dar trebuie să le puteți încărca pe WordPress.

Să ne uităm la câteva pluginuri pentru WordPress care vă permit să încărcați fonturi personalizate.

Încărcător personalizat de fonturi

Încărcător personalizat de fonturi

Acest plugin vă permite să descărcați fonturi Google și să le aplicați la diverse elemente ale blogului dvs. De exemplu, la rubricile sau corpul articolului sau paginii.

Utilizați orice font

Utilizați orice font

Acesta este un plugin WordPress care vă oferă o interfață convenabilă pentru a descărca fonturi și a le utiliza direct prin intermediul editorului vizual. Editorul vizual WordPress poate schimba automat fontul oricărui text. Acest plugin oferă mai multe caracteristici, ceea ce face ca procesul de adăugare a fonturilor personalizate să fie mult mai ușor de gestionat.

Fonturi Google WP

Fonturi Google WP

WP Google Fonts vă permite să utilizați catalogul de fonturi Google. Unul dintre avantajele uimitoare ale acestui plugin este adăugarea a aproape 1000 de fonturi Google. Deși puteți să introduceți fonturi Google manual, este mult mai ușor să utilizați un plugin pentru majoritatea utilizatorilor.

Cum se instalează fonturile cu un plugin?

Să luăm, de exemplu, fonturile Google WP. Instalați acest plugin din depozitul oficial WordPress și deschideți secțiunea Fonturi Google.

Fonturi Google WP

Veți vedea un panou de control al fonturilor Google aici. Alegeți fonturi și schimbați diverse setări, cum ar fi stilul fontului, elementele la care este aplicat, etc.

Opțiunea 2 – Instalați fonturile personalizate WordPress manual

Prin directiva @ font-face, puteți conecta ambele sau mai multe fonturi la site-ul dvs. Dar această metodă are pro și contra.

Pro-uri:

  • Prin CSS, puteți conecta fonturi de orice format: ttf, otf, woff, svg.
  • Fișierele font vor fi localizate pe serverul dvs. – nu veți depinde de servicii terțe.

Contra:

  • Pentru conexiunea corectă a fontului pentru fiecare stil, trebuie să înregistrați un cod separat.
  • Fără a ști CSS, te poți confunda ușor.

Dar nu este o problemă reală dacă poți pur și simplu copiați un cod finit și unde trebuie să vă specificați valorile.

Notă: Înainte de a începe, asigurați-vă că creați o temă pentru site-ul dvs. În acest fel puteți face toate modificările pentru tema copilului dvs., lăsând tema de bază în tact, astfel încât să o puteți actualiza cu ușurință, după cum este necesar în viitor.

Pasul 1: Creați un folder „fonturi”

În tema copilului dvs. creați un nou folder „fonturi” sub: wp-content / themes / dvs.-copil-tematice / fonturi

Pasul 2. Încărcați fișierele de font descărcate pe site-ul dvs. web

Acest lucru se poate face prin panoul de control al găzduirii dvs. sau prin FTP.

Adăugați toate fișierele de fonturi în folderul de fonturi nou adăugate: wp-content / themes / dvs.-copil-tematice / fonturi ai creat.

Pasul 3. Importați fonturi prin foaia de stil pentru copii

Deschideți fișierul style.css al temei copilului dvs. și adăugați următorul cod la începutul fișierului CSS (după comentarea temei copilului):

@ Font-face {
font-family: 'MyWebFont';
src: url ('fonturi / WebFont.eot');
src: format url ('fonturi / WebFont.eot? #iefix') (format "încorporat-opentype"),
format url („fonts / WebFont.woff”) („woff”),
format url („fonts / WebFont.ttf”) („truetype”),
format url ('fonts / WebFont.svg # svgwebfont') ('svg');
font-greutate: normal;
font-style: normal;
}

Unde MyWebFont este numele fontului, iar valoarea proprietății src (datele între paranteze dintre ghilimele) este locația lor (legături relative). Trebuie să specificăm fiecare stil separat.

De când conectăm pentru prima dată stilul normal, setăm proprietățile font-weight și font-style la normal.

Pasul 4. La adăugare italice, scrieți următoarele:

@ Font-face {
font-family: 'MyWebFont';
src: url ('fonturi / WebFont-Italic.eot');
src: url (format "fonturi / WebFont-Italic.eot? #iefix") ("încorporat-opentype"),
format url („fonts / WebFont-Italic.woff”) („woff”),
format url („fonts / WebFont-Italic.ttf”) („truetype”),
url ('fonts / WebFont-Italic.svg # svgwebfont') format ('svg');
font-greutate: normal;
font-style: italic;
}

Acolo unde totul este la fel, am atașat proprietatea stilului font cu caractere italice.

Pasul 5. Pentru a adăuga caractere aldine, adăugați următorul cod:

@ Font-face {
font-family: 'MyWebFont';
src: url ('fonturi / WebFont-Bold.eot');
src: url (format "fonturi / WebFont-Bold.eot? #iefix") ("încorporat-opentype"),
format url („fonts / WebFont-Bold.woff”) („woff”),
format url („fonts / WebFont-Bold.ttf”) („truetype”),
url ('fonts / WebFont-Bold.svg # svgwebfont') format ('svg');
font-greutate: bold;
font-style: normal;
}

Unde am setat proprietatea font-pondere pe bold.

Nu uitați să indicați locația corectă a fișierelor de caractere pentru fiecare stil.

Pasul 6. Pentru a conecta caractere aldine tip scrise, scrieți următoarele:

@ Font-face {
font-family: 'MyWebFont';
src: url ('fonturi / WebFont-Italic-Bold.eot');
src: format url („fonturi / WebFont-Italic-Bold.eot? #iefix”) („embedded-opentype”),
format url ('fonts / WebFont-Italic-Bold.woff') format ('woff'),
format url ('fonts / WebFont-Italic-Bold.ttf') format ('truetype'),
format url ('fonts / WebFont-Italic-Bold.svg # svgwebfont') format ('svg');
font-greutate: bold;
font-style: italic;
}

Ei bine, asta este totul �� Acum ați conectat patru stiluri de font la site-ul dvs. web.

Există însă o remarcă – această conexiune de font va fi afișată incorect în Internet Explorer 8. Consolația este că există foarte puține persoane care utilizează încă IE8.

Înfășurați fonturi personalizate pentru WordPress

Care este primul lucru pe care îl observă utilizatorii atunci când vă vizitează site-ul? Corect, designul ei! Majoritatea designului se bazează pe utilizarea corectă a fonturilor frumoase. Prin urmare, trebuie să aveți grijă de designul de fonturi al site-ului dvs. Adăugați cod sau utilizați unul dintre pluginurile menționate mai sus pentru a încorpora un stil de font nou. Care este modul în care îl alegeți.

Asigurați-vă că nu utilizați mai mult de două fonturi pe același site. Cu cât adăugați mai multe fonturi personalizate pe site, cu atât viteza site-ului devine mai lentă.

Cu toate acestea, nu ezitați să comentați. 

De asemenea, vom fi bucuroși să aflăm ce opțiune alegeți pentru a adăuga un font personalizat pe site-ul dvs. și unde veți găsi fontul dvs..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map