Mióta elkezdtem ismerkedni a Gantry 5-tel, felvetődött a kérdés, hogy ennek a feladatnak mi a megvalósítási módja az új Gantry 5 keretrendszerben. Nos, a jó hír az, hogy ebben sokkal egyszerűbb az egész (mintaként a g5_hydrogen alapsablonnal mutatom be).

1.) A templates/g5_hydrogen/fonts/ mappa alatt készítsük el a saját fontunk mappáit. Ha pl. egy fontnak van normál és vastag variánsa, akkor mindegyik variánsnak külön mappa kell:

  templates/g5_hydrogen/fonts/dinpro_bold
  templates/g5_hydrogen/fonts/dinpro_medium
  templates/g5_hydrogen/fonts/dinpro_regular
  templates/g5_hydrogen/fonts/yanone_bold
  templates/g5_hydrogen/fonts/yanone_extralight
  templates/g5_hydrogen/fonts/yanone_regular

2.) A fontfájlokat töltsük fel ezekbe a mappákba, a weben szokásos .ttf (vagy .otf), .eot, .woff és .svg formátumban, ügyelve a kis- és nagybetűk különbözőségére. (A ttf-ből vagy otf-ből a webhez szükséges .eot, .woff, illetve .svg állományok előállítása (konvertálása) online webes konverterekkel elvégezhető, erre itt most nem térek ki.)
3.) A templates/g5_hydrogen/gantry/theme.yaml fájlba szúrjuk be az újonnan feltöltött fontok elérési útvonalát és fájlnevét, kiterjesztés nélkül:
(Az alap Hydrogen sablonhoz tartozó font a Roboto, az eredetileg már definiálva van a yaml fájlban)

 fonts:
    roboto:
      400: 'gantry-theme://fonts/roboto_regular_macroman/Roboto-Regular-webfont'
      500: 'gantry-theme://fonts/roboto_medium_macroman/Roboto-Medium-webfont'
      700: 'gantry-theme://fonts/roboto_bold_macroman/Roboto-Bold-webfont'
    dinpro:
      400: 'gantry-theme://fonts/dinpro_regular/dinpro-regular'
      500: 'gantry-theme://fonts/dinpro_medium/dinpro-medium'
      700: 'gantry-theme://fonts/dinpro_bold/dinpro-bold'
    yanone:
      400: 'gantry-theme://fonts/yanone_extralight/yanonekel'
      500: 'gantry-theme://fonts/yanone_regular/yanonekr'
      700: 'gantry-theme://fonts/yanone_bold/yanonekb'

Itt a példában két fonttal, a 'DinPro' és a 'Yanone Kaffesatz' egészítettem ki a sablon saját fontkészletét. Ahogy látható, a 400, 500, 700-zal kezdődő sorok a font vastagsági variánsai.
4.) Mentsük el és töltsük fel a theme.yaml fájlt eredeti helyére és a sablonbeállításoknál fordíttassuk újra a css-t.
Íme az eredmény (címsor: Yanone Kaffesatz, bekezdés: DinPro):

Gantry5 - Egyedi betűtípus hozzáadása Joomla! Magyarország

Kiegészítés:
A YAML nyelvben a sorok behúzásának fontos szerepe van, továbbá a behúzásokat szóközökkel és NEM TAB karakterekkel kell végezni!
Aki jobban meg kíván ismerkedni ezzel a nyelvvel, az a specifikációjával html vagy pdf formátumban (angol nyelven) megismerkedhet.

0
0
0
s2sdefault
Log in to comment

csezo profilkép
csezo válaszolt a témára: #2 2015 nov. 29 14:01
Csak sajnos ezzel még nem oldottuk meg az eredeti fontkészlet hosszú ékezetes betűinek problémáját.
Arra tipp?
csezo profilkép
csezo válaszolt a témára: #3 2015 nov. 29 17:23
Na gyorsan meg is válaszolom magamnak:
Az 5.2.3 verzióban már egy egész korrekt Font-Picker funkció lakik, ezzel az admin felületen válaszható
Zotius profilkép
Zotius válaszolt a témára: #4 2015 nov. 30 07:09

csezo írta: Csak sajnos ezzel még nem oldottuk meg az eredeti fontkészlet hosszú ékezetes betűinek problémáját.
Arra tipp?

Persze, de ez azért van, mert a Gantry tervezői sem foglalkoznak azzal, hogy lehetnek egyesek, akiknek a közép-európai fontkészletre van szükségük.
Egyébként saját készletként a Gantry eredeti "Roboto" készletét is fel lehet tölteni saját készletként.
Ha a Google Font-os verzió (Subsets: Latin Extended) nem jó, keress rá Google-ban. Rengeteg helyen fellelhető. Itt például az a verzió van fenn , mely támogatja a magyar ékezetes karaktereket is. Saját karakter használata egyébként az oldal betöltésének sebességére is jótékony hatással van.
Balázs profilkép
Balázs válaszolt a témára: #5 2015 nov. 30 09:41
Igen, én régebben kértem a fejlesztőket, hogy az alapértelmezett Latin Extended verzió legyen bent, de véleményük szerint ez több száz kb-al növelné a csomag méretét, így minden maradt a régiben.
Zotius profilkép
Zotius válaszolt a témára: #6 2015 dec. 01 17:38
Az sajnos kimaradt a cikkből, s eddig még nem sikerült a gantry5-ös megoldásra rájönnöm, hogy a Hydrogen sablon frissítése felülírja a /templates/g5_hydrogen/gantry/theme.yaml fájlt, s ezzel a font definíciók kiegészítése eltűnik. :(
Lehet, hogy marad a custom.scss fájlban elhelyezett @font-face definíció... Ezt még ki kell próbálnom.
Balázs profilkép
Balázs válaszolt a témára: #7 2015 dec. 01 18:38
Igen, egyelőre csak az a járható út.