The web has a limited supply of fonts it displays. There are only about 7 "web safe" fonts that are available in most browsers. These web safe fonts are all commonly installed on most computers and will display when instructed to by the browser. Any additional fonts would have to be loaded or installed on computers to display, so use of them risks that another font might be substituted if the browser selected a font that was not installed.

Google has created a solution to this problem and created a free library of loadable fonts. This page describes how to use these fonts in a HotDoodle theme.

To use a Google Font:

• Browse http://www.google.com/webfonts
• Click choose
• Pick a font, click "quick-use"
• Set options as desired
• Get the gname
• Go to the "Add this code to your website:" part, chose the "Standard" tab
• It will have something like
    <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
• Copy just the quoted part after family=. This will be the gname mentioned below
• Get the family
• Go to the "Integrate the fonts into your CSS:" part
• It will have something like the below (may be hard to read)
    font-family: 'Crafty Girls', cursive;
• Copy all after the ": " to but not including the ending ";". This will be the family mentioned below

To install the font, create and edit a custom theme and include a line like the following in the Theme definition TPL file. It can be declared anywhere, but best practice is to place it in the header just before or after the declaration of the MAIN_FONT_FAMILY.

{declare_font gname="gname' family="family"  }

Example:

{assign var=LINKDIFFERENTIATION value='SIZE'}
{assign var=MAIN_FONT_FAMILY value='Verdana,Tahoma,Arial,sans-serif'}
{declare_font gname='Kaushan+Script' edname="Kaushan Script" family="'Kaushan Script',cursive"  }

Args to declare_font:

• gname -- the name google needs in the stylesheet include link
• edname -- the name to call it in the text editor. If omitted the font is not available in the editor.
• family -- the family the text editor will assign when edname is chosen. 
         Should include a generic fallback family. Defaults to gname

Now it can be referenced per Google

You are responsible for your own font-family declarations whereever needed within the custom theme's TPL file.

{declare_font gname='Parisienne'}
{assign var=MAIN_FONT_FAMILY value="'Parisienne',Verdana,Tahoma,Arial,sans-serif"}

{declare_font gname='Kaushan+Script' edname="Kaushan Script" family="'Kaushan Script',cursive"  }
.title [
        font-family: 'Kaushan Script', cursive;
]

Only the gname is needed to install the font for reference from the CSS. To use the font by name from within the HTML editor, the edname and family must be set.

Using the Kaushan Script example above, the editor will list "Kaushan Script" as a choice in the font family drop down menu, and if selected, it will generate HTML like the following:
    <span style="font-family: 'Kaushan Script',cursive;">highlight the text</span>

To see if the gname declarations have been honored, do a view-source on a page. Look for something like the following:

  <!-- Load the declare_font gnames -->
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Parisienne' type='text/css'>
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Kaushan+Script' type='text/css'>
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Caesar+Dressing' type='text/css'>
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Crafty+Girls' type='text/css'>
  <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Monofett' type='text/css'>
  <!-- Load the HotDoodle theme and system stylesheets -->
  <link rel="stylesheet" href='/prodcat_ml_test2/files/theme/compiled/Custom/Custom.css' />
  <link rel="stylesheet" href='/hotdoodle_engine/looks/sys/_menubar2.css' />

To see if the ednames have been honored, open a screen with an editor window and look for "theme_hotdoodle_fonts". Example:

theme_hotdoodle_fonts : "Parisienne=Parisienne;Kaushan Script='Kaushan Script',cursive;
Caesar Dressing='Caesar Dressing',cursive;Crafty Girls='Crafty Girls',cursive;Monofett=Monofett;
Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;
Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;
Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;
Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;
Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;
Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats"

Should the fonts be honored, look at the generated HTML and CSS. The intrepretation of the declarations is as per the conventions of those langages as honored by the browsers.

declare_layout and declare_font are cached per session and this caching cannot be reset from the browser.

To clear the cache, view the website in another browser session with ?hdsid=new at the end of the url.
That will have a new HotDoodle cache.

Google examples include many of the names in single quotes. It is unclear if the quotes are required, experimenting with and without them may be necessary.

Tip: To get Google fonts to display in IE 10, the font-family will have to be declared in the actual element, not all elements will inherit them from the body element for some reason. Example: Add the font-family CSS style to the paragraph element or the class for the navigation menu to get them to show up there.

theme_hotdoodle_fonts : "Parisienne=Parisienne;Kaushan Script='Kaushan Script',cursive;Caesar Dressing='Caesar Dressing',cursive;Crafty Girls='Crafty Girls',cursive;Monofett=Monofett;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats"