Ebben a posztban arról szeretnék írni, hogyan cserélheted ki könnyen és gyorsan a WordPress oldaladon a betűtípusokat, a Google Fonts segítségével. Ahhoz, hogy a weboldalunkon használt fontok jól jelenjenek meg a legtöbb böngészőben, érdemes webfontokat használni, ehhez jön jól a Google Fonts szolgáltatása, aminek segítségével, kiválaszthatjuk a megfelelő fontot és elhelyezhetjük azt az oldalunkon.
A Google Fonts nyitó oldalán ez a látvány fogad. A jobb oldali sávban van lehetőség a keresésünk paramétereit beállítani, ha ez megvan akkor mehet is a keresgélés.
Ha megvan a nekünk tetsző font, ne felejtsük ellenőrizni, hogy árvíztűrő-e, főleg, ha magyar nyelvű oldalhoz keresünk fontot. Ezt megtehetjük, úgy, hogy a kiválasztott font fölé húzzuk a kurzort, ekkor megjelenik egy piros menüsor, aminek az első tagjánál a kis piros háromszöget lenyitva több opciót találunk. A custom menüpontot kiválasztva saját próbaszöveget is be tudunk írni.
Ha ezzel megvagyunk és minden klappol, akkor a jobb sarokban lévő “+” jel ikonnal kiválaszthatjuk a fontot. Ha felnyitjuk a kiválasztott fontcsalád panelt akkor mindjárt látunk két kódtöredéket is.
A felső kódsort, ahogy írják is, a weboldal <head> részébe kell elhelyezni. A WordPressben ezt a Megjelenés menü, Szerkesztő menüpontjában érhetjük el, mégpedig a header.php filet megnyitva. (Ez a sablon fejrésze.) Ide illesszük be a megadott kódot. Majd ne felejtsünk el menteni, a Fájl módosítása gomb megnyomásával.
A következő lépés a style.css file módosítása. Ehhez azonban tudnunk kell, hogy melyik elem betűtípusát akarjuk megváltoztatni. Ezt a legkönnyebben úgy tudjuk kideríteni, hogy a weboldalon a szövegre nyomunk egy jobb klikket és a menüből az inspect/elem megtekintése menüpontot választjuk. Itt látjuk, hogy melyik szövegrésszel van dolgunk és az milyen betűtípussal szerepel. Itt nálam a body szövegrészről van szó, ami Raleway fonttal jelenik meg. Ezt kell tehát megkeresni a style.css fileben, amit ugyanott találunk meg, mint a header.php. Ha megtaláltuk a style.css-ben a kódot, akkor cseréljük ki a fontcsaládnál feltüntetett második kóddal, majd mentsük el a változásokat. Ezzel készen is vagyunk, a weboldalon, ha mindent jól csináltunk, akkor már az új font látható!
