Cum să adăugați fonturi WordPress personalizate (și să alegeți fonturile care se împerechează)

Căutați o modalitate de a adăuga propriul font personalizat în WordPress pe site-ul dvs.?

Tema dvs. WordPress vine probabil cu mai multe fonturi din care puteți alege, dar opțiunile pot fi destul de limitate. Deci este perfect de înțeles că doriți să adăugați un font nou sau un font diferit.

În această postare, veți învăța cum să încărcați și să utilizați orice font ales în WordPress prin câteva metode diferite.

În cazul în care nu sunteți familiarizat cu ideea de a folosi propriul font WordPress, vom începe cu o scurtă prezentare despre unde să găsiți un font personalizat și cum să le asociați.

Apoi, vă vom arăta cum să adăugați un font WordPress personalizat, indiferent dacă acesta este un font Google, font Adobe (numit anterior font Typekit) sau literalmente oricare altul.

Faceți clic pe acest link pentru a trece direct la tutoriale.

Descoperiți cum să publicați în câteva secunde, nu în ore

Înscrieți-vă acum pentru a obține acces exclusiv la Wordable, împreună cu și pentru a afla cum să încărcați, formatați și optimizați conținutul în câteva secunde, nu ore.

Începeți să publicați

Unde să găsiți fonturi personalizate pentru WordPress

Cel mai cunoscut loc pentru a găsi fonturi personalizate WordPress este cu siguranță Google Fonts.

La Google Fonts, veți găsi un depozit de peste 900 de fonturi, toate gratuite și foarte ușor de integrat în site-ul dvs. WordPress datorită CDN-ului Google.

O altă opțiune binecunoscută este Adobe Fonts.

Adobe Typekit Web Fonts oferă mii de fonturi frumoase care pot fi adăugate rapid la oricare dintre proiectele dvs. web.

Acestea sunt incluse fără costuri suplimentare ca parte a abonamentului Adobe Creative Cloud, dar nu sunt disponibile pentru non-abonați.

În cele din urmă, puteți găsi o mulțime de alte site-uri care agregă mai multe fonturi gratuit și la tarife premium. Două dintre preferatele noastre sunt:

• Font Squirrel – colectează fonturi care sunt 100% gratuite pentru uz comercial.
• Fonts.com – are o colecție mare de fonturi premium.

Cum să împerechezi fonturile astfel încât site-ul tău să arate minunat

De obicei, nu veți folosi un singur font pe site-ul dvs. WordPress. În schimb, majoritatea site-urilor folosesc perechi de fonturi pentru a crea un design mai interesant și pentru a ajuta la diferențierea conținutului.

Cu toate acestea, nu doriți să aruncați doar aleatoriu două fonturi împreună - ar putea să nu arate prea fierbinte.

În schimb, aveți nevoie de două fonturi care funcționează împreună și care, dacă nu sunteți designer, pot fi greu de înțeles.

Pentru a vă ajuta, există o mulțime de site-uri grozave care vă vor sugera o pereche de fonturi potrivită pentru dvs. De exemplu, dacă găsiți un font care vă place absolut, puteți folosi unul dintre aceste site-uri pentru a găsi o pereche pentru el. Unele dintre preferatele noastre sunt:

• FontPair
• Fontjoy
• Typ.io

Deși nu există nicio regulă care să spună că puteți utiliza doar două fonturi, ar trebui să fiți atenți să utilizați mai multe fonturi. Dincolo de potențialul de a crea un design haotic, utilizarea prea multor fonturi poate încetini, de asemenea, timpul de încărcare a site-ului dvs.

Cum să adăugați fonturi WordPress personalizate: Ghiduri pas cu pas

Acum, pentru partea distractivă – iată cum să începeți să utilizați propriul font personalizat pe WordPress.

Există câteva rute pe care le puteți urma aici, în funcție de unde doriți să vă procurați fonturile.

Iată cele trei metode pe care le vom acoperi. Din nou, puteți face clic pe un link pentru a trece direct la un anumit tutorial:

• Adăugați fonturi Google în WordPress (plugin, manual sau metode de găzduire locală)
• Adăugați fonturi Adobe (Typekit) în WordPress
• Utilizați CSS3 @font-face pentru a încărca și adăuga orice font în WordPress

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

Deoarece Google Fonts este cea mai populară sursă pentru fonturi personalizate WordPress, vom acoperi trei moduri diferite de a adăuga fonturi Google la WordPress:

• Adăugați fonturi Google din CDN-ul Google cu un plugin
• Adăugați manual fonturi Google din CDN-ul Google
• Găzduiește fonturi Google local în WordPress cu un plugin

Cum să adăugați fonturi Google în WordPress utilizând un plugin

Datorită popularității Google Fonts, puteți găsi mai multe plugin-uri de calitate care fac foarte simplu să adăugați Google Fonts la WordPress, preferatul nostru fiind Easy Google Fonts deoarece este:

• Gratuit
• Ușoare
• Ușor de folosit

După ce instalați și activați pluginul pentru font, accesați Aspect → Personalizare în tabloul de bord WordPress pentru a lansa în timp real WordPress Customizer.

Apoi, faceți clic pe opțiunea Tipografie pentru a alege opțiunile Google Fonts:

De acolo, puteți folosi opțiunile pentru a alege un font personalizat pentru fiecare element de pe site-ul dvs.:

De exemplu, iată cum arată să schimbi fontul paragrafului:

Dincolo de alegerea fontului în sine, pluginul vă permite și să personalizați:

• Grosimea fontului
• Decorare text
• Culoarea fontului

Dacă vă cunoașteți un mic cod CSS, puteți utiliza și funcția de control al fonturilor a pluginului pentru a grupa anumite elemente. De exemplu, puteți combina selectoare de antet pentru a viza toate anteturile dvs. simultan.

Pentru a configura acest lucru, accesați Setări → Fonturi Google și creați un nou Font Control pentru a viza anumite selectoare CSS:

Cum să adăugați fonturi Google în WordPress fără un plugin

Deoarece Google găzduiește toate fonturile pe propriul CDN, este, de asemenea, destul de ușor să adăugați manual Fonturi Google la WordPress.

Practic, în loc să fie nevoie să încărcați fișierele cu fonturi pe serverul dvs., puteți doar să vă conectați la CDN-ul găzduit de Google, iar Google se va ocupa de difuzarea fonturilor pentru dvs.

Unii oameni nu le place să facă acest lucru din motive de performanță – voi împărtăși o modalitate de a găzdui local Fonturi Google în secțiunea următoare, dacă doriți.

Pentru a începe, trebuie să utilizați site-ul Google Fonts pentru a alege fontul pe care doriți să îl adăugați.

Pentru acest exemplu, să presupunem că doriți să utilizați Roboto.

Accesați pagina fontului și faceți clic pe + Selectați acest font:

Aceasta va adăuga o fereastră în colțul din dreapta jos. Faceți clic pentru a extinde acea fereastră.

Dacă doriți să alegeți greutăți suplimentare de font (de exemplu, pentru aldine și cursive), puteți accesa fila Personalizare. Pentru un echilibru bun între utilizare și performanță, vă recomandăm să alegeți trei greutăți de font la maximum absolut:

• Regulat
• Cursiv
• Îndrăzneţ

Puteți folosi chiar mai puține dacă doriți cea mai bună performanță.

Odată ce ați făcut alegerile, reveniți la fila Încorporare și copiați codul fontului încorporați:

Apoi, trebuie să adăugați acest cod în secțiunea temei dvs. WordPress. Puteți face acest lucru prin:

• Editarea directă a fișierului header.php al temei dvs. copil (asigurați-vă că utilizați o temă copil - în caz contrar, fonturile dvs. personalizate vor dispărea când vă actualizați tema)
• Folosind un plugin gratuit, cum ar fi Inserați anteturi și subsoluri

După ce ați adăugat codul, puteți începe să utilizați Fonturi Google în CSS.

Dacă reveniți la site-ul Google Fonts, Google vă va spune de fapt regulile CSS pe care trebuie să le utilizați:

De exemplu, pentru ca etichetele dvs. h2 să folosească noul font Roboto, puteți accesa Aspect → Personalizare → CSS suplimentar și adăugați următorul fragment:

h2 {

familie de fonturi: „Roboto”, sans-serif;

}

Cum să găzduiești fonturi Google local în WordPress cu un plugin

Iată metoda finală pentru Google Fonts!

Unii oameni preferă să găzduiască fonturi Google local, decât să le încarce din CDN-ul Google. Adică, în loc să le încărcați dintr-un link precum „https://fonts.googleapis.com/css?family=Roboto:400,700”, puteți găzdui fișierele pe propriul server.

Cel mai simplu mod de a face acest lucru este cu un plugin gratuit numit CAOS pentru Webfonts.

Odată ce instalați și activați pluginul, puteți merge la Setări → Optimizare Webfonts pentru a alege ce fonturi doriți să descărcați pe server:

Odată ce ați făcut asta, puteți începe să utilizați fontul(ele) din CSS (la fel ca și cum ați urma metoda anterioară).

Cum să adăugați fonturi Adobe (Typekit) în WordPress

Dacă doriți să utilizați Adobe Fonts în WordPress, puteți urma în esență aceiași pași ca metoda manuală Google Fonts. Rețineți că serviciul Adobe Fonts este disponibil numai ca parte a abonamentului Creative Cloud.

Pentru a începe, va trebui să utilizați site-ul web Adobe Fonts pentru selectarea fonturilor și să creați un proiect web (instrucțiuni detaliate aici).

În fereastra Adăugați fonturi la proiectul web, puteți alege ce fonturi să includeți:

Apoi, Adobe vă va oferi un cod de încorporare, la fel ca Google Fonts:

Luați acel cod de încorporare și adăugați-l pe site-ul dvs. folosind fie fișierul header.php al temei copilului, fie un plugin precum Insert Headers and Footers.

După ce v-ați conectat la fișierul CSS, puteți utiliza codul CSS pe care Adobe îl furnizează pentru a începe să aplicați fontul selectoarelor CSS de pe site-ul dvs.:

Cum se utilizează @font-face în WordPress

În cele din urmă, ultima metodă pe care ți-o vom arăta este cum să folosești @font-face în WordPress. Lucrul frumos despre această metodă este că va funcționa cu orice fișier de font din orice sursă.

Practic, atâta timp cât puteți descărca fișierul cu font și aveți drepturi de utilizare, CSS3 @font-face îl va face.

Pentru a începe, descărcați fișierul fontului din sursa preferată. Pentru acest exemplu, vom folosi un font gratuit de la Font Squirrel numit Alex Brush.

Dacă este posibil, încercați să descărcați fișierul în formatele de fișier .woff sau .woff2 pentru cea mai bună compatibilitate între browsere. Dacă acest lucru nu este posibil, puteți descărca fontul într-un alt format și apoi utilizați instrumentul gratuit FontSquirrel Webfont Generator pentru a-l converti în .woff:

Apoi, conectați-vă la serverul site-ului dvs. WordPress prin FTP sau cPanel File Manager. Atunci…

• Creați un dosar nou denumit fonturi în cadrul temei active sau al directorului temei secundare (unele teme ar putea avea deja un dosar cu fonturi. Dacă acesta este cazul, puteți sări peste asta).
• Încărcați fișierul cu fonturi în folderul cu fonturi. Puteți încărca atât formatele .woff, cât și .woff2

După ce ați încărcat fișierele, accesați Aspect → Personalizare → CSS suplimentar în tabloul de bord WordPress.

În primul rând, trebuie să utilizați @font-face pentru a adăuga fontul...

Pentru a face acest lucru, introduceți numele fontului dvs. ca familie de fonturi și adăugați adresa URL directă la fișierul de font de pe serverul dvs. ca URL. Iată cum arată exemplul nostru AlexBrush:

@font-face {

familie de fonturi: AlexBrush;

src: url(http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff);

greutatea fontului: normal;

}

După ce ați făcut asta, puteți utiliza CSS pentru a vă aplica familia de fonturi (după numele pe care l-ați înregistrat cu @font-face). De exemplu, iată cum arată să utilizați fontul AlexBrush pentru antetele <h2>:

Si asta e! Puteți folosi această metodă CSS3 @font-face pentru literalmente orice fișier de font.

Gânduri finale despre fonturile WordPress personalizate

Dacă tema dvs. WordPress nu are fonturile pe care doriți să le utilizați, nu vă panicați! Aveți o mulțime de opțiuni pentru a adăuga propriile fonturi WordPress personalizate.

Cel mai simplu mod de a începe este cu fonturile gratuite găzduite la Google Fonts sau cu opțiunile premium găzduite la Adobe Fonts.

Cu toate acestea, nu sunteți în niciun caz limitat la aceste servicii și, folosind CSS3 @font-face, puteți încărca literalmente orice fișier de font pe WordPress și puteți începe să îl utilizați în tema dvs.

Acum ieșiți acolo și creați-vă propria pereche de fonturi!