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.
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.
The first block of settings in the font panel are the main settings used for controlling the fonts in our template releases.
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.
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.
Please view this document for enabling Typekit in your Zen Grid Framework version 2 template.
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.
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.