Cum schimbi fonturile unei teme Genesis

screenshot-after

Cea mai comuna cerinta a clientilor carora le-am instalat o tema child construita pe Genesis Framework este schimbarea fonturilor. De multe ori proprietarii de site-uri folosesc un plugin special pentru incarcarea de fonturi din Google Font Library, lucru care nu este cel mai recomandat.

Varianta corecta de a schimba fonturile unei teme este urmatoarea…

Am luat spre exemplificare o tema child pentru Genesis care incarca 2 fonturi Google: Roboto Slab pentru titluri si Source Sans Pro pentru body text.

screenshot-before
Before

Sa presupunem ca dorim sa inlocuim fontul titlurilor din Roboto Slab in Playfair Display, de exemplu.

1. Se deschide cu un editor text (recomandam Notepad++) fisierul functions.php al temei si se cauta functia care incarca fonturile.

https://gist.github.com/fasterwp/b551c7ec1d4c022a1d61e9da756efeb8

Sunt 2 fonturi incarcate, Source Sans Pro si Roboto Slab. In exemplul de fata vom inlocui doar Roboto Slab cu Playfair Display.

Linia de cod respectivă devine:

https://gist.github.com/fasterwp/375dc173ef43c77e7f0b8e32ddfa3cb4

2. Se deschide cu un editor text fisierul style.css al temei si folosind functia de search and replace (CTRL+H in Notepad++) se cauta liniile unde apare Roboto Slab si se inlocuieste cu Playfair Display.

In exemplul de fata fontul este declarat doar intr-un singur loc, la clasa entry-title.

https://gist.github.com/fasterwp/70e0fe1d2e683c48cd864e51b85c76f1

ATENȚIE: Un detaliu de retinut, in cazul de fata Playfair Display nu are weight 300 deci am modificat font-weight in 400, care inseamna normal. In functie de fontul folosit se pot seta valori de la 200 (extra light) pana la 900 (ultra bold).

screenshot-after
After

Practici recomandate

  • nu folositi editorul text din WordPress
  • nu folositi editorul text din cPanel
  • descarcati fisierele prin FTP si editati cu un editor de text care are UNDO (Atom, Visual Studio Code, Notepad++)
  • intotdeauna faceti backup la fisierele pe care urmeaza sa le modificati

Nu merg diacriticele?

Fonturile de mai sus sunt încărcate în varianta standard, adică fără diacritice. Pe desktop s-ar putea să nu se observe (depinde de font) însă pe mobil lipsa diacriticelor este mult mai evidentă.

Dacă vreți să folosiți diacritice trebuie încărcate fonturile în varianta Latin Extended. Problema care apare este că nu pot fi încărcate mai multe fonturi printr-o singură linie de cod (2 fonturi, în cazul nostru) ci trebuie folosite 2 linii de cod, câte una pentru fiecare font.

Deci, linia de cod inițială…

https://gist.github.com/fasterwp/b551c7ec1d4c022a1d61e9da756efeb8

Se va transforma în…

https://gist.github.com/fasterwp/e93d49253208edf5b8dfa493eb6f8a0e

Atenție: observați că am modificat și id-ul, nu mai este google-font, ci fiecare are un id diferit (source-font și playfair-font), dacă lăsați același id nu va funcționa.

5 responses

  1. Avatar Luci Florescu
    Luci Florescu

    Eu încă de când am instalat tema aceasta folosesc WP Google Fonts, nu m-am descurcat să fac treaba asta la momentul oportun, așa că am rămas doar în zona mea de confort.

    1. Avatar Andrei Chira
      Andrei Chira

      Exista mai multe pluginuri care pot face asta, nu le-am testat chiar pe toate dar cele testate aveau probleme de performanta, consumau memorie si intarziau putin incarcarea site-ului.

  2. Avatar Gabriel Ursan
    Gabriel Ursan

    Foarte bun tuturorialul.

    De specificat că dacă dorești să folosești un singur font, acesta nu trebuie adăugat de două ori cum făcusem eu inițial. Partea cu editarea style.css poate fi un pic mai explicită.

    Și musai merită făcută și precizarea/tutorialul de adăugare a suportului pentru diacrtitice (Latin Ext. sau ceva de genul, nu?).

    1. Avatar Andrei Chira
      Andrei Chira

      Am editat articolul cu specificatiile respective.

      1. Avatar Gabriel Ursan
        Gabriel Ursan

        Mulțumesc!

Lasă un răspuns

Adresa ta de email nu va fi publicată.