You are here: Designer > Interface > Dialogs > Fonts
 

Fonts Manager

The Fonts Manager contains the fonts that were added to the template manually. It essentially lists the fonts located in the Fonts folder of the Resources pane (see Fonts).

Fonts with the same file name with a different extension are considered variations of the same font. For example, if there are three files, named gotham-book-webfont.eot, gotham-book-webfont.ttf, gotham-book-webfont.woff, only "gotham-book-webfont" appears in the Name column of this dialog.

The following buttons appear to the right of the list of fonts:

  • New: Click to open the Edit Font dialog to add a new font.
  • Edit: Click to open the Edit Font dialog to edit the currently selected font.
  • Remove: Click to delete the currently selected font entry.
  • Duplicate: Click to create a copy of the currently selected font entry.

Edit Font

The Edit Font dialog appears when clicking New or Edit from the Fonts Dialog.

  • Name: Enter the name that should be used to refer to the font. This is equivalent to the font-family property of the @font-face CSS rule (see http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp).
  • Font Weight: Use the drop-down to select the default font weight (the thickness, see http://www.w3schools.com/cssref/pr_font_weight.asp):
    • None: Does not define the property.
    • Normal: Defines font-weight as normal
    • Bold: Defines the font-weight as bold (equivalent to a numerical value of 700).
    • Numerical values: Defines the line thickness; 400 is normal, 700 is bold.
  • Font Style: Use the drop-down to select the font style (see http://www.w3schools.com/cssref/pr_font_font-style.asp:
    • None: Does not define the property.
    • Normal: Defines font-style as normal
    • Italic: Makes the font italic.
    • Oblique: Makes the font oblique (this is generally the same as italic but does not require a special italic version of the font).
  • Name: Check the fonts in the list to include them in the font definition.