Controlling Fonts

The Zen Grid Framework comes with som flexible solutions for controlling the appearance of fonts on the page.

The font stacks section of the template administrator controls the appearance of the fonts on your site and gives you four different options to choose from.

These options include:

• Using the in built font stacks that allow you to choose from ten different font stacks that are natively rendered in the browser.
• Using Google fonts which is a free solution and allows you to display up to 17 more font stacks on the page.
• Typekit which is an affordable commercial solution for displaying an astounding array of professional fonts on your site.
• Disable all font control. With this option selected any font declararations placed in the template's css file will control the appearance of fonts on the page.

How does it work?

These styles are written to the body class and a container div in the template. The divs are then targeted using css and javascript to load the correct font.

While using new and creative fonts is fun the extra load time on your website should be taken into account. The most light weight solution is to disable all font control or use the core Zen Grid fonts. The typekit and google font options will add a little more to the general page load which may or may not be an issue depending on your site.

For a full run down of the fonts available please plus some more information on using fonts with the Zen Grid Framework please visit the Zen Grid Knowledgebase.