Tutoriale WordPress de încredere, atunci când aveți cea mai mare nevoie.
Ghidul începătorului pentru WordPress
Cupa WPB
25 de milioane+
Site-uri web care folosesc plugin-urile noastre
16+
Ani de experiență WordPress
3000+
Tutoriale WordPress de la experți

Cum să adaugi tipografie grozavă în WordPress cu Typekit

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.

Fonturi Typekit în WordPress

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

Abonează-te la WPBeginner

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.

Planuri de abonament Typekit

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.

Crearea unui kit pentru site-ul dumneavoastră

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.

Alegerea unui font din biblioteca Typekit

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ă.

adaugă un font Typekit la kitul tău web

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

adăugarea fontului web personalizat la un kit

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

publicați-vă kit-ul pentru a salva modificările

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.

utilizând un plugin wordpress typekit pentru a personaliza fonturile

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.

Utilizarea instrumentului Inspect Element în Google Chrome pentru a găsi clase CSS

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.

Dezvăluire: Conținutul nostru este susținut de cititori. Acest lucru înseamnă că dacă faceți clic pe unele dintre linkurile noastre, este posibil să câștigăm un comision. Vedeți cum este finanțat WPBeginner, de ce contează și cum ne puteți susține. Iată procesul nostru editorial.

Cel mai bun instrumentar WordPress

Obține acces GRATUIT la instrumentarul nostru - o colecție de produse și resurse legate de WordPress pe care fiecare profesionist ar trebui să le aibă!

Interacțiuni cu cititorii

5 CommentsLeave a Reply

  1. 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?

  2. 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 :-(

    • 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!

  3. 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!

Lasă un răspuns

Vă mulțumim că ați ales să lăsați un comentariu. Vă rugăm să rețineți că toate comentariile sunt moderate conform politicii noastre de comentarii, iar adresa dvs. de e-mail NU va fi publicată. Vă rugăm să NU folosiți cuvinte cheie în câmpul nume. Să avem o conversație personală și semnificativă.