This guide explains how to use the Google Font API to add web fonts to your pages. You don't need to do any programming; all you have to do is add a special stylesheet link to your page, then refer to the font in a CSS style in your CSS file, or, as an override against a particular label, field control or group.
Step 1 - Add Font Family to Page (or Application)
Go to the Application Map screen and open up the 'Show Advanced Options' for a particular page on the right hand panel, or, the application on the left hand panel. This will depend on whether you plan for the font to be used on all pages, or, just the one.
Add the reference to the font by applying a CSS reference that points to the Google hosted font. For example: http://fonts.googleapis.com/css?family=Tangerine
For further details on applying different, or additional fonts, please consult the Google resource:
http://code.google.com/apis/webfonts/docs/getting_started.html
NOTE: It is generally recommended that the Font CSS reference is applied to the application.
Step 2 - Add font to CSS File or Control
The second stage is to apply the font details to a CSS file or by adding as a CSS override when you want to apply to a single field or group. For the first option visit the 'Field Details' screen and select and edit the CSS file you wish to add the font details too.
An example of styling that could be added for a Group Style could be:
NOTE: If using Google font family values it is always important to ensure that they can gracefully degrade if required to more standard family values e.g. serif in this example.
For the second option visit the 'Field Details' screen and apply a look and feel 'CSS override' to the Label, Field Control or Group as appropriate.
NOTE: It is generally recommended that the Font CSS reference is added to an application specific CSS file.
For a full list of all Google Fonts available, please visit:
http://code.google.com/webfonts
Step 1 - Add Font Family to Page (or Application)
Go to the Application Map screen and open up the 'Show Advanced Options' for a particular page on the right hand panel, or, the application on the left hand panel. This will depend on whether you plan for the font to be used on all pages, or, just the one.
Add the reference to the font by applying a CSS reference that points to the Google hosted font. For example: http://fonts.googleapis.com/css?family=Tangerine
For further details on applying different, or additional fonts, please consult the Google resource:
http://code.google.com/apis/webfonts/docs/getting_started.html
NOTE: It is generally recommended that the Font CSS reference is applied to the application.
Step 2 - Add font to CSS File or Control
The second stage is to apply the font details to a CSS file or by adding as a CSS override when you want to apply to a single field or group. For the first option visit the 'Field Details' screen and select and edit the CSS file you wish to add the font details too.
An example of styling that could be added for a Group Style could be:
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
NOTE: If using Google font family values it is always important to ensure that they can gracefully degrade if required to more standard family values e.g. serif in this example.
For the second option visit the 'Field Details' screen and apply a look and feel 'CSS override' to the Label, Field Control or Group as appropriate.
NOTE: It is generally recommended that the Font CSS reference is added to an application specific CSS file.
For a full list of all Google Fonts available, please visit:
http://code.google.com/webfonts