Cum să adăugați fonturi personalizate pe un site web WordPress

Doriți să aflați cum să adăugați fonturi personalizate pe un site web WordPress?

De ce să-ți faci blogul plictisitor folosind fonturi standard? Lăsați blogul să vorbească despre personalitatea dvs. vibrantă și despre subiectele pe care le acoperiți cu o mare varietate de fonturi personalizate. Fonturile personalizate sunt o caracteristică excelentă care face blogul tău să arate preferabil altora.

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

Și aici apar două întrebări: de unde să obțineți fonturi personalizate pentru WordPress și cum se instalează fonturi personalizate pe site-ul dvs.

Hai să aflăm.

De ce ar trebui să folosesc fonturi personalizate?

Au dispărut vremurile în care Times New Roman și Georgia erau considerate singurele fonturi pentru text de pe site-uri web. În ultimii ani, spațiul fonturilor s-a schimbat complet odată cu apariția fonturilor precum Google fonturi și altele.

Astăzi, există sute de fonturi gratuite, ajutoare de informare și instruire și resurse de design disponibile pe Internet. Spre deosebire de Adobe Illustrator, Photoshop și alte aplicații obișnuite, WordPress nu vă oferă control deplin asupra fonturilor implicite. Doar anumite teme WordPress aleg să accepte și să utilizeze fonturi personalizate.

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

Importanța utilizării fonturilor personalizate

De ce să schimbați fonturile, indentarea între cuvinte, spațierea între linii, spațierea literelor sau saturația fontului, vă întrebați? Oricum, 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 după designul acesteia.

Designul fonturilor afectează cititorii, chiar dacă nu le acordă atenție. Abandonarea designului fontului înseamnă abandonarea dezvoltării în sine! Starea de spirit a cititorului depinde de asta. Fontul facilitează citirea sau obligă utilizatorii să părăsească pagina.

Toate browserele web includ un set implicit de fonturi. Aceasta înseamnă că dacă fontul nu este specificat în CSS-ul paginii, se va folosi versiunea standard. Puteți utiliza în continuare fonturile implicite, dar acestea îngreunează utilizatorii. De aceea este esențial să folosiți un font personalizat. Dacă tema dvs. WordPress nu vă oferă opțiuni pentru a schimba fontul, există multe site-uri web și instrumente care vă pot ajuta.

Alternative pentru fonturi Google

Mulți dintre voi îl cunoașteți Fonturile Google. Există multe alte site-uri web unde puteți găsi fonturi frumoase. Unele dintre ele sunt gratuite pentru uz personal. Dacă aveți nevoie de utilizare comercială, veți avea nevoie de o licență. Fonturile Google și Fonturile Adobe Edge sunt gratuite. Acesta este motivul pentru care nu sunt atât de unici.

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

1. Template Monster — Pe site-ul TemplateMonster veți găsi tot ce aveți nevoie pentru web design. Există, de asemenea, multe fonturi și pachete de fonturi pentru uz personal la un preț mic. În plus, Pentru a vă ajuta să alegeți, toate fonturile prezentate pe broșuri sau rame. Fiecare font este, de asemenea, prezentat cu o licență comercială.
2. Fonturile_mele — MyFonts oferă în prezent cea mai mare selecție de fonturi din lume. Prețurile de aici sunt însă și în segmentul superior. Deci, dacă aveți un buget restrâns, acesta poate să nu fie pentru dvs.
3. FontSpring — Fontspring vinde fonturi de lux pentru uz comercial. Dar în aproape fiecare familie 1-2 fonturi gratuite pot fi folosite pentru uz personal. În plus, există o secțiune separată cu fonturi gratuite. Colecția este vibrantă. Dar va trebui să studiați cu atenție informațiile de licențiere pentru un anumit font înainte de a descărca.
4. cufonfonts — Aceasta este, de asemenea, o colecție imensă de fonturi diferite. 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 de pe CufonFonts este destul de flexibil și convenabil. În plus, este inclus suport Webfont.
5. Dafont — O altă colecție accesibilă de 3 de fonturi gratuite. Cele mai multe dintre ele sunt concepute doar pentru uz personal. O caracteristică plăcută DaFont este un sistem de categorii. Puteți selecta fonturi în stilul benzilor desenate, jocuri video, vintage etc.

Alegerea fonturilor este foarte tentantă pentru că toate sunt frumoase. Dar nu ar trebui să alegi prea mult. Nu utilizați mai mult de două fonturi pe un site web. Apoi,aspectul site-ului dvs. web va fi consistent. 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, aldine, cursive etc.).

Acum că ați selectat fontul potrivit pentru site-ul dvs. web, să aflăm cum să îl adăugați.

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

Există mai multe moduri de a adăuga fonturi pe un site web WordPress:

1. Plugin-uri : în acest caz, diferit WordPress plugin-uri sunt folosite pentru a facilita procesul.
2. manual : Folosind această metodă, aveți nevoie de descărcarea fontului încărcat pe site și editați fișierul CSS.
3. tematică: Multe teme populare oferă 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.

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

Dacă nu ne pasă de schimbările globale, putem instala WordPress plugin-uri care va schimba fonturile de pe site-ul dvs.

Caracteristici ale pluginurilor de font personalizate

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 potrivit când sunt atât de multe? Care sunt caracteristicile pluginurilor WordPress cu font personalizat?

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

• Posibilitatea de a utiliza un font personalizat
• Abilitatea de a utiliza mai multe fonturi
• Anteturi și componente țintă
• Bonus: posibilitatea de a schimba setările fontului din editorul vizual

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

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

1. Mai bun font minunat

Acest plugin WordPress va permite utilizatorilor săi să combine automat cea mai recentă versiune de fonturi Better Font Awesome cu CSS, shortcodes și multe altele. În plus, acest plugin WordPress este actualizat automat.

Veți găsi acolo funcții: actualizări regulate, un generator de shortcode, compatibilitate cu alte plugin-uri WordPress, etc...

Descarca | Demo | web hosting

2. Google Fonts pentru WordPress

Acest plugin WordPress este format din fonturi speciale 877, care vă vor permite să utilizați toate fonturile de pe site-urile dvs. WordPress. Datorită previzualizării sale în timp real, vă va permite să vedeți cum va arăta site-ul dvs. web odată cu aplicarea fontului. 

În plus, îl vei putea salva și edita pe frontend când vei găsi combinația de care te vei bucura.

Caracteristicile sale includ: o previzualizare în timp real, a SEO destul de avansat, suport multilingv, suport pentru mai multe fonturi 870 + Google, actualizări ușoare și multe altele.

Descarca | Demo | web hosting

3. Plugin pentru fonturi

Fonts Plugin este un plugin WordPress gratuit care permite utilizatorilor să acceseze bibliotecile Fonturi Google și Adobe Fonts. Cu acest plugin WordPress, puteți alege dintre peste 1000 de fonturi Google și Adobe, puteți utiliza mai multe fonturi pe site-ul dvs. și puteți testa diferite opțiuni cu funcția de previzualizare în timp real a pluginului în personalizarea WordPress.

Pentru mai multe modalități de a personaliza tipografia site-ului dvs., cum ar fi dimensiunea fontului, spațierea dintre litere și înălțimea liniilor, puteți face upgrade la versiunea premium, Plugin pentru fonturi Pro.Descarca | Demo | web hosting

4. Fonturi simple Google

Easy Google Fonts este unul dintre cele mai bune plugin-uri WordPress pentru a personaliza tipografia site-ului dvs. La fel ca Pluginul Fonturi, vă permite să alegeți dintre sute de fonturi Google și să le previzualizați în Personalizator înainte de a le adăuga pe site-ul dvs. web.

Deși oferă acces la un număr mai mic de fonturi Google, este unic prin faptul că vă permite să creați controale și reguli personalizate pentru fonturi în zona de administrare, care vor apărea imediat în personalizarea WordPress.

Descarca | Demo | web hosting

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

Folosind directiva @font-face, puteți conecta unul sau mai multe fonturi la site-ul dvs. web. Dar această metodă are avantajele și dezavantajele ei.

beneficii:

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

dezavantaje :

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

Dar nu este o problemă reală dacă poți doar copiați codul terminat și unde trebuie să vă specificați valorile.

Notă : Înainte de a începe, asigurați-vă că creați o temă copil pentru site-ul dvs. În acest fel, puteți face orice modificări temei copilului, lăsând tema principală, astfel încât să o puteți actualiza cu ușurință dacă este necesar în viitor.

Pasul 1: Creați un folder „fonturi”.

În tema copilului, creați un nou dosar „fonturi” sub: wp-content/themes/tema-copil-tau/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 sau prin FTP.

Adăugați toate fișierele cu fonturi în dosarul cu fonturi nou adăugat: wp-content/themes/În tema copilului, creați un nou dosar „fonturi” sub: wp-content/themes/tema-copil-tau/fonturi pe care l-ai creat.

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

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

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

où MyWebFont este numele fontului și valoarea proprietății src (datele dintre paranteze între ghilimele) este locația lor (linkuri relative). Trebuie să specificăm fiecare stil separat.

Deoarece conectăm mai întâi stilul normal, setăm proprietățile font-weight și font-style la normal.

Pasul 4. Când adăugați cursive, scrie urmatoarele:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Când totul este la fel, doar atașăm proprietatea stilului fontului la cursive.

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

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Unde am setat proprietatea font-weight la bold.

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

Pasul 6. Pentru a conecta caractere cursive aldine, tastați următoarele:

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

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

Dar există o notă: această conexiune de font nu se va afișa corect în Internet Explorer 8. Consolarea este că sunt foarte puțini oameni care încă mai folosesc IE8.

Alte resurse recomandate

De asemenea, vă invităm să consultați resursele de mai jos pentru a merge mai departe în controlul și controlul site-ului și blogului dvs.

• 10 pluginuri WordPress acordeon pentru un site web
• Cum să adăugați mai multe coloane în WordPress
• Unele plugin-uri pentru a integra serviciile Google pe blogul dvs.
• Plugin-uri 5 WordPress pentru afișarea notificărilor
• Folosind diferite medii WordPress

Concluzie

Care este primul lucru pe care îl observă utilizatorii când vă vizitează site-ul? Așa este, designul său! Cea mai mare parte a designului se bazează pe utilizarea corectă a fonturilor frumoase. Deci, trebuie să aveți grijă de designul fontului site-ului dvs. Adăugați cod sau utilizați unul dintre pluginurile menționate mai sus pentru a integra un nou stil de font. Cum îl alegi depinde de tine.

Asigurați-vă că nu utilizați mai mult de două fonturi pe același site web. Deoarece cu cât adăugați mai multe fonturi personalizate pe site, viteza site-ului va scădea.

Asta este pentru acest articol care vă arată cum să adăugați fonturi personalizate la un site web WordPress. Vă invităm să încercați. Dacă aveți nelămuriri sau sugestii, vă rugăm să ne anunțați comentarii.

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

În același timp, împărtășește acest articol pe diferitele rețele de socializare.   

...