Tokyo sablon alap betűtípusának megváltoztatása

Gyakran felmerülő igény, hogy szeretnénk egyedi betűtípust webáruházunkba, ezt a Beállítások> Megjelenés> Sablon testreszabás> Sablon CSS lehetőségnél is meg lehet tenni, viszont csak úgy, ha az alap betűtípus benne marad a rendszerben.

Minél több betűtípus van betöltve a webáruházba, annál lassabb az oldal betöltődés, ezért nem szeretnénk, ha egy nem használt betűtípus lassítaná az oldalt.

Első lépésben nyissuk meg a Google Font gyűjteményét a https://fonts.google.com címen.

Ke_pernyo_foto__2019-01-21_-_22.59.11.png

A jobb felső sarokban található Search mezőben tudunk keresni betűtípust név alapján. A gyakorlottabb felhasználók a jobb oldali szűrő alapján kereshetnek egyedi betűtípusokat.

Fontos odafigyelni arra, hogy magyar nyelvű oldalaknál a Languages szűrőnél a Latin extended értéket ki kell választani, hogy az ékezetes betűket is kezelje a betűtípus.

 A Search mezőbe írjuk be a Nunito szót, és a következő találatot láthatjuk:

Screenshot_from_2019-01-21_17-36-25.png

A találat jobb felső sarkában lévő plusz ikonra kattintva kiválasztásra kerül a betűtípus és megjelenik egy alsó sáv:

Screenshot_from_2019-01-21_17-37-10.png

Kattintsunk a Family Selected sötétszürke sávra, hogy be tudjuk állítani a betűtípust.

Screenshot_from_2019-01-21_17-38-08.png

A képen látható CUSTOMIZE fülre kattintva be kell pipálnunk a Latin extended opciót, hogy az ékezetes betűtípusokat is tudja kezelni.

Itt még beállíthatunk több betűvastagságot is, de figyeljünk arra, hogy túlzásba sem érdemes esni, mert az is lassíthatja az oldal betöltődést. Ezt a Google is jelzi a Load Time cimkénél.

Screenshot_from_2019-01-21_17-38-08.png

Az EMBED fülre visszakattintva ki kell másolnunk a vágólapra a @IMPORT-nál található kódrészletból a középső sort:

Screenshot_from_2019-01-21_17-40-15.png

vagyis ezt a kódot kell majd használnunk:

@import url('https://fonts.googleapis.com/css?family=Nunito&subset=latin-ext');

A hátralévő feladatokat most már a ShopRenter boltunk adminisztrációs felületén a Sablon fájl szerkesztőben kell elvégeznünk.

A Sablon fájl szerkesztőben keressünk rá a style.scss fájlra, és nyissuk meg szerkesztésre.

Az első feladat az alap betűtípus behúzását kicserélni arra az import kódsorra, amit a Google font gyűjteményből másoltunk ki, vagyis a következő kódot cseréljük ki a 16. sorban:

Screenshot_from_2019-01-21_17-29-12.png

Az utolsó lépésben a CTRL + G billentyűkombinációval ugorjunk a 213. sorra: a felugró ablakban írjuk be hogy 213, majd nyomjunk egy ENTER billentyűt.

Screenshot_from_2019-01-21_17-30-30.png

A $font-family-base értékét kell kicserélnünk, pontosabban a Roboto név helyett használnunk kell a Google Font gyűjteményben látható nevet, ami esetünkben a Nunito.

Ha kicseréltük a betűtípust, akkor rámenthetünk a style.scss-re, és kipróbálhatjuk a webáruházban a módosításunkat.

Végül szeretnénk a figyelmet felhívni arra, hogy ha csak bizonyos helyeken, például modul fejlécekben szeretnénk egyedi betűtípust vagy egyszerre 2-3 betűtípust szeretnénk, akkor kérjünk szakmai segítséget!

Van még kérdése? Kérelem beküldése

0 Megjegyzések

Kérjük, Belépés után hagyjon megjegyzést.