Egy példán keresztül mutatom be, hogyan kell egy-egy weboldal elem betűtípusát lecserélni. Nézzük meg, milyen volt a weboldal teteje:
A „Weboldal készítés tanfolyam és oktatás online!” részt fogom másik betűtípussal megjeleníteni. Mit kell ehhez tennem?
1. lépés – a változtatandó betű típusának megkeresése a forráskódban
Google Chrome-ban meg kell nyitni a weboldalt, majd az egeret a fent említett szövegrész fölé kell vinni. Ezután jobb egérgomb => Elem megtekintése opciót kell választani.
Az 1. számmal jelölt helyen láthatjuk, hogy a kiválasztott szöveg jelenleg Arial betűtípussal van megjelenítve. A 2-3. helyen magát a kiválasztott szöveget látjuk, a weboldalon látható formában, illetve a forráskódban megjelölve.
2. lépés – betűtípus választás
Kell keresni egy betűtípust. Erre a célra a Google web fonts szolgáltatást javaslom. Itt különböző szempontok szerint lehet keresgélni a betűtípusok között. Ha megtaláltuk a megfelelő betűtípust, akkor a mellette található „Quick-use” feliratra kattintva lehet a használatához szükséges utasításokat.
3. lépés – betűtípus integrálás a weboldalba
Kiválasztottam a példa kedvéért a Griffy nevű betűtípust. Ezután lépésről lépésre leírják, hogy mit kell tenni. A „3. Add this code to your website:” rész alatt található kódot a header részbe kell betenni, ami általában a header.php-ban szerepel. Ezt a fájlt meg kell nyitni a „Megjelenés” => Szerkesztő menüpont alatt, majd itt ki kell választani a header.php fájlt. Ezután a kódot be kell szúrni a többi stíluslapot behívó kód közé (ezután el kell menteni a fájlt):
Ezután ugyanitt a style.css fájlt kell megnyitni, és meg kell keresni az első lépésben látott képen az „1.” jelöléssel ellátott kódrészletet (#header h2), majd az ott található „font-family: Arial;” részt ki kell cserélni a Google web fonts oldalon található 4. pontban leírt kódra: „font-family: ‘Griffy’, cursive;”
4. lépés – az eredmény megtekintése
Ezután (ha elmentettük a style.css fájlt) frissíthetjük a weboldalunkat, és a változást máris észre lehet venni, a „Weboldal készítés tanfolyam és oktatás online!” szövegrész betűtípusa meg lett változtatva:
Ajánlott cikkek:
Kinézet váltás, redesign, banner csere
Egyedi betűtípus feltöltése és használata WordPress alatt
Mi micsoda egy WordPress kinézetben?
WordPress hibaüzenet (és megoldás): Couldn’t connect to database server.Couldn’t find database magical_rules…
Egy WordPress weboldal törlése
De jól néz ki! Ez WordPress? Vajon mi a kinézet neve?