Cum pot seta fonturile magazinului meu?

Fonturile sunt un element extrem de important pentru crearea unei experiente intuitive si eficiente pentru utilizatori. Atunci cand sunt utilizate in mod corect, fonturile ghideaza privirea vizitatorilor dintr-o zona in alta, pentru a mentine atentia acestora asupra produselor si a caracteristicilor principale, in timp ce navigheaza printre produse. Procesul de navigare prin site si informare trebuie sa indrume utilizatorul spre finalizarea comenzii in checkout.

Marimile de font si culorile scot in evidenta importanta anumitor texte, precum numele de produs (dimensiune de font mai mare) in raport cu numele categoriei (dimensiune de font mai mica).

Intr-o pagina de produs textele existente indeplinesc fiecare cate un rol important, cu scopuri diferite. O pagina de produs contine de regula mai multe categorii de informatii (numele produsului, pretul, producatorul, descrierea, specificatiile si altele), iar fontul, dimensiunea acestuia si culoarea trebuie alese in functie de importanta pe care informatia respectiva o are in contextul paginii.

Seteaza un font din galerie

Pentru a modifica fonturile, urmeaza acesti pasi:

  1. Acceseaza pagina Design & Tema si apasa butonul Setari tema;
  2. Continua in sectiunea Global si seteaza preferintele specifice cu privire la afisarea fonturilor in paginile magazinului:
  • Text color - seteaza culoarea textelor;
  • Text family - selecteaza familia fonturilor;
  • Text family-monospace - selecteaza familia de texte monospatiate, in cazul in care vrei sa asiguri o spatiere mai mare si egala intre litere;
  • Text scale - seteaza dimensiunea fonturilor;
  • Text weight - seteaza raportul dintre grosimea si inaltimea unui caracter afisat in cadrul textelor din paginile magazinului;
  • Heading family - selecteaza familia fonturilor care vor fi utilizate pentru titlurile din paginile magazinului;
  • Heading color - selecteaza culoarea fonturilor utilizate in titlurile din paginile magazinului;
  • Heading scale - seteaza raportul dintre grosimea si inaltimea unui caracter afisat in titlurile paginilor din magazin;
  • Heading line-height - seteaza valoarea dinamica pe baza careia se va realiza spatierea intre liniile de text din site.
  1. Continua in sectiunea Header si seteaza preferintele specifice cu privire la afisarea fonturilor in zona de header a magazinului:
  • Text color - seteaza culoarea textelor afisate in header-ul site-ului;
  • Text family - selecteaza familia de fonturi pentru textele afisate in header-ul site-ului.
  1. Continua in sectiunea Listing si seteaza preferintele cu privire la afisarea preturilor in paginile de listing ale magazinului:
  • Price color - seteaza culoarea in care vor fi afisate preturile in cadrul paginilor de listing din magazin;
  • Price scale - seteaza dimensiunea preturilor in cadrul paginilor de listing din magazin.
  1. Apasa butonul Salveaza dupa ce te-ai asigurat ca ai facut setarile necesare.

TIP
Asigura-te ca fontul pe care il alegi contine toate diacriticele necesare; in cazul in care anumite dispozitive nu il sustin, fontul ales va fi inlocuit cu fontul default al sistemului respectiv de operare.

Incarca propriul font

Daca doresti sa folosesti un font diferit de cele listate in Design & Tema, vei avea nevoie sa descarci un webkit pentru fontul dorit. Acest kit va contine fisierele pentru tipurile de font cat si un fisier de tip .css de care vei avea nevoie mai tarziu.

NOTE
Anumite fonturi necesita o licenta de utilizare si este recomandat sa utilizezi doar acele fisiere pentru care ai drepturi de utilizare comerciala, pentru a evita inconveniente de natura legala.

Urmeaza acesti pasi pentru a incarca fontul dorit, in panoul de control al magazinului:

  1. Descarca kit-ul fontului dorit, care include numele de font (obligatoriu cel putin cate un fisier in formatele .ttf si .woff), cat si un fisier cu extensia .css);

  2. Mergi la pagina Manager fisiere;

  3. Creeaza un folder nou pentru acea familie de font, prin click pe butonul Folder nou. Este recomandat sa adaugi fisierele acestui font intr-un folder nou, pentru a putea apela usor fisierele din codul CSS;

  4. Apasa butonul Adauga fisier si incarca fonturile (trebuie sa incarci toate tipurile de font pe care le vei utiliza din acea familie de font, cat si fisierele .woff si .css);

  5. Mergi la pagina Editor templateuri, sectiunea main.css;

  6. Adauga codul CSS necesar, pentru a include in main.css fisierul .css primit la descarcarea kit-ului pentru font. Este recomandat sa se incarce fisierul la inceputul lui main.css. Apelarea fisierului se va face ca in acest exemplu:
    @import url('//cdn.shopmania.biz/files/s15/848447526/content/font/open-sans.css);

  7. Atribuie fontul instalat elementului dorit, ca in exemplul de mai jos:
    a { font-family: "open_sansregular", Arial, sans; }

  8. Salveaza modificarile.

TIP
Pentru mai multe informatii privind adaugarea de fonturi in editorul de template-uri, ia legatura cu echipa MerchantPro si un consultant iti va raspunde tuturor intrebarilor.

Termeni specifici

Familie font: reprezinta o colectie completa de fonturi avand acelasi stil al corpului de litera, respectiv multimea fonturilor avand aceeasi forma a fiecarui caracter in parte, indiferent de celelalte atribute (tip, dimensiune s.a.). Exemple: Arial, Helvetica, Roboto, Roboto Condensed.

Greutate font: este raportul dintre grosimea si inaltimea unui caracter; in general un font are 4-6 greutati. Exemple: thin, light, regular, medium, bold, black.

Nume font: fisierele pentru nume font pot fi de tipul nume_font .ttf, nume_font.otf, nume_font.woff, nume_font.woff2, nume_font.eot; cele mai populare fisiere sunt .woff si .woff2, iar un kit pentru web font este obligatoriu sa contina cel putin cate un .woff si .ttf.

Ultima modificare: 29 Aug 2022
Te-a ajutat acest articol?
Mai ai nevoie si de alte informatii?
Confidentialitate
Utilizam cookie-uri pentru a-ti oferi serviciile si pentru a-ti optimiza experienta. Navigand in continuare, iti exprimi acordul cu privire la Politica de Cookies.