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):
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.
