Flexible font control has always been a part of the Zen Grid Framework based themes and that tradition continues in Zen Grid Framework 4 (zgf5) themes by making it super simple to use standard web native fonts or any of the hundreds of fonts available on the google webfont directory.
Font sizes for each heading tag is easily set by adding a px, em or other valid font-size value.
In addition to this the families and their weights are easily specified for the body, heading, menu and logo fonts.
It is also possible to use custom fonts to target specific html selectors in your content.
Using the example below any element given the class .my-new-style will render using the Rochester font and the color red.
Use Javascript Loader or not ...
A new feature to zgf5 themes is the ability to specify whether or not to use the javascript loader to load fonts. The javascript loader ensures that the site loads faster as the font assets are loaded after the site loads. Using the font loader however can cause what is known as a FOUT or Flash of unstyled content where there is a slight flash on the page as the new font is applied to your content.
By default the font loader is turned off and the google fonts are loaded in a single css asset.
