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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Roboto+Slab:300', array(), PARENT_THEME_VERSION ); |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Playfair+Display', array(), PARENT_THEME_VERSION ); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .entry-title { | |
| font-size: 36px; | |
| font-size: 3.6rem; | |
| line-height: 1; | |
| font-family: Playfair Display, Georgia, serif; | |
| font-weight: 400; | |
| } |
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ă…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Roboto+Slab:300', array(), PARENT_THEME_VERSION ); |
Se va transforma în…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| wp_enqueue_style( 'source-font', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin-ext', array(), PARENT_THEME_VERSION ); | |
| wp_enqueue_style( 'playfair-font', '//fonts.googleapis.com/css?family=Playfair+Display&subset=latin-ext', array(), PARENT_THEME_VERSION ); |
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.
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.
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.
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?).
Am editat articolul cu specificatiile respective.
Mulțumesc!