Font-Family in Gantry Framework

gantry 4 font family set up


I am having fun with Joomla Gantry framework. It is a bit heavy, but highly customizable, tons of template options. I tend to work with LESS, which makes me not CRY ( continuously repeat yourself ), is clear, fast to code etc. I will show you how to deal with gantry web fonts, to apply to whole website. How make it configurable from template control panel. How to override K2 styles in gantry ( get rid off K2 default font families )


This is what we achieved. We managed to apply gantry’s google webfonts to entire webpage! Keep in mind that “because you can, it doesn’t mean you should”. I used webfont to clearly show what has been done, but in real world always take into accound usability and readibility.

For custom build website is easy to style joomla component, just add appropriate .less file and import it to global.less



You can update variables and easily build website. When I tried to build Joomla gantry framework based template I experienced some difficulties. Beauty of gantry framework is template control panel and I wanted to make as much as necessary of it. All gantry configurations are “ruled” by template-options.xml, features and styledeclaration.php. Gantry somehow manages font family in different way than other settings and to make it worse K2 component user its own font families ( 3 to be precise ). Unable to find out simple solution to override K2 styles (font-family ) using k2.less I decided to go for old, good template overrides. First I went to /components/com_k2/css and coppied k2.css into my template templates/myTemplate/css. By doing so you override default K2 styling. Next step is to find and delete all “font-family” from k2.css. Save file, clear cache and from this point my template styles rule K2 ( not completly..). As you probably know when you select font family from gantry control panel it applies only to h2,h1 not paragraphs, links etc. After all my efford only title of K2 item worked fine, category items and tags failed to style because they are anchors ( font-family was inherited from body ). At that point I’ve had declared font family in my templatecutsom.css . I started to dig deeper into gantry framework and discovered that fonts are managed by two files: /libraries/admin/forms/fields/fonts.php and second /libraries/gantry/features/font.php. First script is responsible for retrieving google fonts and second script is standard gantry feature. I just copied second file into my template features folder and started to work. Go to line 114, this looks:



This line basically adds inline style. I simply added html tag “a” to have all links styled. But you could add body tag to have font-familly apply to whole website ( keep in mind loading time ). Instead hard codding we can include selection into template control panel:


To achieve this we need to slightly modify templatye-options.xml



placed it right behind font-size. Few words of explanation. I used two options and two tags body for full set and h2 for “NO” option. “NO” option is basically default gantry set plum “a” tag which I personally added. The reason for using h2 tag in “NO” option is that it was easier to deal with font.php. ( placed conviniently in my features folder ). We just need to pass setting from template-options.xml into font.php. We use $gantry->get(‘font-wholebody’) to grab this value.To break down “font” is name of fields tag which wrapps field tag named “wholebody”. See image below.



Now is time to make all necessary changes to font.php feature particularly addGoogleFont function.



This function starts at line 106 of font.php. Of course you can edit just this file without bothering to create it configurable. At this point we are done with gantry font-family settings. As you remember at the beginning I started too work with K2 Joomla component styles by moving k2.css into mytempalte css folder to clean it up. It worked fine for css, but I broke links to images! For example “rating stars” will not show up. Thankfully Joomla is well organized content management system and what we have to do is create folder K2 ( not necessary but keeps things organized )within myTempalte/images folder. Next step is to go to components/com_k2/images, copy entire content of image folder and paste it into myTemplate/Images/K2 folder. Now is time to update links.



Now everything should work just fine. If not check file permissions on newly created files.