Cum schimbi fonturile unei teme Genesis

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.

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

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.