Knowledgebase

Joomlabamboo template and extension documentation

For all Joomla 3+ templates built using the Zen Grid Framework v4 (any theme after October 2014) please refer to the Zen Grid Framework v4 documentation.

Overview

style

The font panel in all Zen Grid Framework version 2 Joomla templates controls the size and type of fonts used in the template.

The font settings are compiled in a css file called fonts.css and saved to the media/zengridframework/css folder on your site.

Font Settings

The first block of settings in the font panel are the main settings used for controlling the fonts in our template releases.

 fonts1


General Font Settings

There are four options to control the way fonts load in the framework. In general the best setting to use is option4 - Enable font stacks, settings and type kit.


Option1 - Disables all font control in the framework


This setting will disable all aspects of font control in the framework except for the base reset used int he core framework css files (eg media/zengridframework/css/type.css)

If you choose to use this option you need to ensure that you specify at least the font-size and font-family for the body tag in your css/theme.css file.

 

Option 2 - Enable Fonts stacks and settings

This option enables the font control in the framework except for your typekit settings.

 

Option 3 - Enable Type Kit

Enables typekit code but disables the core font control.

 

Option 4 - Enable font control, settings and typekit.

This option enables all font control and settings plus type kit in the template.



Font Size


This setting determines the font size for the template when the font settings are enabled. 

For best results it is ideal if you specify a flexible measurement unit such as %, em or rem as a font size. eg 78%. This setting refers to a percentage of the default browser size as determined by the browser.

 

Font-Family Body


This setting determines the font-family used for all fonts on your page. Use this setting to determine the default font that the page should fall back to if there are no further fonts specified for an element.

 

Font-Family Headings


This setting refers to the font used for all heading tags including h1, h2, h3, h4, h5, h6 as well as the Blockquote styling.

 

Navigation font stack


This setting determines the font to use for the menu position on the page.

 

Custom Font Stack 1, Custom Font Stack 2, Custom Font Stack 3


This block of settings are custom font stacks that can be used to assign to specific css selectors on the page. As an example you can assign a spoecific font to all links by simply adding the letter a as the font selector and then assigning a new font to all elements.

 

Font-families

 fonts3

 

Each Zen grid Framework version 2 template come with an extensive range of font-families to choose from. They are separated into five distinct categories.

Standard

These fonts are commonly used fonts that are native to all browsers and do not require any extra assets to be downloaded.

 

Serif

This collection of fonts is sourced from the Google font repository and contains only fonts that are categorised as Serif fonts in the google webfont directory.

 

Sans Serif

This collection of fonts is sourced from the Google font repository and contains only fonts that are categorised as Sans Serif fonts in the google webfont directory.

 

Display

This collection of fonts is sourced from the Google font repository and contains only fonts that are categorised as Display fonts in the google webfont directory.

 

Handwriting

This collection of fonts is sourced from the Google font repository and contains only fonts that are categorised as Handwriting fonts in the google webfont directory.

 

When using google fonts as a type face on your site be sure to select only one or perhaps two google fonts to avoid extra assets that are required to be loaded on the page.

Typekit

Please view this document for enabling Typekit in your Zen Grid Framework version 2 template.

Developer notes

The framework implements the javascript loader as a means of optimising the way that fonts are loaded on the page. If you view the source of the page you will see the font JSON and javascript that is responsib;e for loading the necessary assets for google fonts.

* If you do  not use google fonts then this will not load on the page.

 

Here is an example block of code used in a template.

{codecitation}

WebFontConfig = {

google: { families: [ 'Oswald']}

};

(function() {

var wf = document.createElement('script');

wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';

wf.type = 'text/javascript'; wf.async = 'true';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(wf, s); })();

{/codecitation}

 

Files that reference Google fonts.

The following files are used to compile and display the fonts in the template.

  • plugins/system/zengridframework/admin/j17/zenoption.php contains the array for the font list in the template selector.
  • plugins/system/zengridframework/fucntions/elements/fonts.php generates the font.css file.
  • plugins/system/zengridframework/index.php contains the javascript used to load the fonts.

Adding other fonts to the Zen Grid Framework template.

Services like Font Squirrel make it easy to add other fonts to your Zen Grid Framework template. For a full run down on how to add them please view the Font Squirrel website or check out the Font Face website for more information.

 

In order to ensure that these extra fonts are implemented correctly it is necessary to either:

1. disable font control in the framework all together (see above)

2. Add the !important declaration to your new font rule when declaring the font family for the element you want to target.

eg p {font-family: newfont !important}

3. Add a more specific target selector for the element you want to target on the page.

eg adding

{codecitation}

#mainContent h2 {font-family: new font}

{/codecitation}

will override the core font control using the traditional hierarchy found in css syntax.