V-ați întrebat vreodată cum reușesc designerii să folosească fonturi web personalizate frumoase pe site-urile lor? Adesea, aceștia adaugă fonturi personalizate în WordPress folosind Typekit, un serviciu Adobe care vă oferă acces la fonturi de înaltă calitate. În acest articol, vă vom arăta cum să adăugați fonturi Typekit în WordPress pentru a vă îmbunătăți tipografia.

De ce să folosiți fonturi Typekit?
Typekit este un serviciu popular de fonturi pe bază de abonament care vă poate economisi mulți bani. În loc să plătiți pentru licențe individuale de fonturi, care pot deveni destul de scumpe, puteți accesa întreaga lor bibliotecă de sute de fonturi gratuit sau la un tarif fix anual.
Biblioteca Typekit este o colecție masivă de peste 1.000 de fonturi. Unele dintre cele mai frumoase fonturi pe care le puteți găsi pe web sunt disponibile prin Typekit, un serviciu Adobe.
Planul lor gratuit de bază vine cu acces la peste 230 de fonturi și puteți utiliza gratuit 2 familii de fonturi pe un singur site web. Alte planuri încep de la 49,99 USD la 99,99 USD pe an.
Aceste fonturi Typekit uimitoare pot fi adăugate cu ușurință pe orice site web, fără a încetini viteza de încărcare a paginii. Fonturile sunt servite de la CDN-ul Adobe și se încarcă la viteze mult mai mari decât dacă le-ați găzdui pe propriul site.
Tutorial Video Typekit pentru WordPress
Dacă nu vă place videoclipul sau aveți nevoie de mai multe instrucțiuni, puteți continua să citiți mai jos.
De ce să folosiți fonturi web personalizate pe WordPress?
Tipografia joacă un rol crucial în designul site-ului dvs.
Alegerea fonturilor potrivite va comunica clar personalitatea și mesajul dumneavoastră cititorilor. Indiferent de imaginea pe care doriți să o proiectați — profesională, prietenoasă, casual, experimentată — fonturile de pe site-ul dumneavoastră pot ajuta la proiectarea imaginii corecte.
Folosind setul potrivit de fonturi, puteți lăsa o impresie de durată. În loc să arate ca orice alt site de pe web, textul dvs. arată vizibil diferit. Selectarea fontului potrivit pentru site-ul dvs. WordPress poate transforma site-ul dvs. dintr-un design simplu într-o operă de artă estetică și uimitoare.
Fonturile web personalizate potrivite pot:
- creșterea ratelor de conversie
- reducerea ratei de respingere a site-ului dumneavoastră
- crește timpul petrecut pe site-ul tău
- crearea unei experiențe memorabile pentru utilizatori
Gata să începi cu fonturile Typekit? Iată cum să folosești Typekit pentru a personaliza designul WordPress.
Cum să începi cu Typekit
Mai întâi va trebui să creați un cont Typekit. Pentru a face acest lucru, vizitați Typekit.com pentru a compara planurile disponibile.
Va trebui să alegeți planul pentru care doriți să vă înscrieți. Planul gratuit vă limitează la un singur site web și include acces la fonturi limitate. S-ar putea să doriți să începeți cu planul gratuit pentru a-l încerca, apoi să faceți upgrade mai târziu. Upgrade-ul vă oferă o bibliotecă mai mare de fonturi și le puteți folosi pe mai multe site-uri web.

Următorul pas este crearea unui kit. Kit-ul îți permite să aduni o bibliotecă specifică de fonturi și setări pentru site-ul tău, astfel încât Typekit să încarce doar fișierele și codul necesar. Pentru a crea kit-ul, adaugă numele site-ului și numele domeniului, apoi apasă pe Continuare.

După ce ați terminat de completat informațiile pentru kitul dvs., Typekit vă va oferi un fragment de cod JavaScript pe care să-l adăugați pe site-ul dvs. Puteți copia și lipi acest cod într-un editor de text precum Notepad pentru a-l salva deocamdată. Îl vom adăuga pe site-ul dvs. în următorul pas al acestui tutorial.
Deocamdată, puteți începe să vă alegeți fonturile. Puteți răsfoi biblioteca de fonturi și filtra după opțiuni precum clasificarea, greutatea, lățimea, înălțimea x și multe altele.

Când vedeți un font care vă place, puteți face clic pe el pentru mai multe detalii și exemple. Dacă doriți să îl adăugați la kit-ul dvs. web, faceți clic pe butonul Web Use: Add to Kit din partea dreaptă.

Aceasta va deschide o fereastră pop-up unde trebuie să adăugați fontul selectat în kitul pe care tocmai l-ați creat.

Acum puteți face clic pe butonul Publicare pentru a salva modificările kitului dvs.

Atât! Kitul dvs. de fonturi este acum gata de utilizare.
Adăugarea fonturilor Typekit în WordPress
Cel mai simplu mod de a adăuga noile fonturi web personalizate pe blogul dvs. WordPress este prin utilizarea unui plugin WordPress Typekit.
Recomandăm pluginul Typekit Fonts for WordPress. După instalarea și activarea pluginului, puteți vizita Setări » Typekit Fonts pentru a configura pluginul.

Mai întâi va trebui să introduci codul JavaScript pe care l-ai salvat mai devreme în câmpul codului de încorporare Typekit. După aceea, poți adăuga selectori CSS pentru a specifica unde vrei să folosești fontul pe site-ul tău.
În captura de ecran de mai sus am adăugat fontul la selectorul CSS h1.site-title.
Tema dvs. WordPress poate folosi clase diferite pentru elemente diferite. Va trebui să utilizați instrumentul Inspect Element din browserul dvs. web pentru a afla acele clase CSS. De asemenea, ați putea consulta fișa noastră generată de WordPress pentru CSS pentru începători, pentru a vă ajuta să începeți.

Acesta este tot! Sperăm că acest articol v-a ajutat să învățați cum să adăugați o tipografie grozavă în WordPress cu Typekit. S-ar putea să doriți, de asemenea, să consultați ghidul nostru despre cum să adăugați fonturi web Google în temele WordPress.
Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.

Forest Antemesaris
Această listă a funcționat pentru mine, deci mulțumesc! Dar italicele nu sunt italice adevărate, ci sunt oblice. Există o modalitate de a face italicele adevărate italice?
Suport WPBeginner
Ar depinde de fontul specific, ar trebui să contactați suportul Typekit și aceștia ar trebui să vă poată asista.
Admin
Jes
Same request here. I have installed the Typekit plugin and gone through all the processes to add fonts to my site, but the fonts are not available in the inline text editor and drop-down menu list
George Galbraith
Divi nu suportă o modalitate ușoară de a adăuga fonturi la editorul de text inline sau la meniul derulant. Va trebui să urmați calea tradițională și să definiți în continuare dimensiunea/greutatea/fontul pentru h1-h6/p în câmpul CSS din personalizatorul temei.
Apoi folosiți etichetele pentru a aplica fonturile în editorul inline. Sper să vă ajute!
Michael
Thank you for this great tutorial (and the excellent value you provide in general)! It will save me from having to use a plugin
Mă întreb cum să adaug fontul în editorul inline și în meniurile derulante ale temei mele (DIVI) folosind Typekit și fonturi personalizate (nu Google).
Aveți vreo sugestie?
Noroc!