Web Font Settings


Font Family

  • Edit Label: (input) You can enter a short name to make this stack easier to identify in edit mode. The short name can be anything that you like and is not added to the font code on your page.
    • Default: My Self Hosted Font
  • Family Name: (input) You can enter a unique font family name for this group of font faces. This will be the font name that people see if they inspect your site. You can use it to hide the identity of your font or to make the appearance better than the default stacks related name. Ensure that no two names are the same in a project. If you leave this blank, Font Pro will automatically assign a unique id. The CSS font-family is used in the @font-face definition in your code. If you need to apply this font to other elements on your page add the code font-family: followed by this name to the approprate element via CSS
    • Default: font-family
  • Edit Preview: (button-2) You should only turn off this setting to briefly preview your font in edit mode and ensure that it is loading correctly. Leaving this setting enabled can cause page jumps. This is expected behavior in stacks - do not report this as a bug.
    • Default: [false, false]
  • Info: Enabling this may cause the Stacks UI to be jumpy while working. Do not leave this enabled.

Font Family Source Files

  • Font Setup: (select) The type of font files to supply
    • Default: Essential (woff only)
    • Possible Values:
      • Essential (woff only): All modern browsers support WOFF font files. This is the simplest way to supply font files
      • Advanced: Advanced source setup where you can define multiple file formats for optimal browser support
  • Normal: (link) The URL to the woff font file for the Normal style font for this font family. You can also select the resource from teh RapidWeaver resource list. Then RapidWeaver will take care of uploading the font file for you
    • Enable: When Font Setup is set to woff
    • Default:
  • Bold: (link) The URL to the woff font file for the Bold style font for this font family. You can also select the resource from teh RapidWeaver resource list. Then RapidWeaver will take care of uploading the font file for you
    • Enable: When Font Setup is set to woff
    • Default:
  • Italic: (link) The URL to the woff font file for the Italic style font for this font family. You can also select the resource from teh RapidWeaver resource list. Then RapidWeaver will take care of uploading the font file for you
    • Enable: When Font Setup is set to woff
    • Default:
  • Bold Italic: (link) The URL to the woff font file for the Bold Italic style font for this font family. You can also select the resource from teh RapidWeaver resource list. Then RapidWeaver will take care of uploading the font file for you
    • Enable: When Font Setup is set to woff
    • Default:
  • Normal: (input) Enter a a base url and file name without an extention. For example http://fonts.myServer.com/muso Fonts Pro will then add all 5 appropriate extensions
    • Enable: When Font Setup is set to advanced
    • Default:
  • Bold: (input) Enter a a base url and file name without an extention. For example http://fonts.myServer.com/muso Fonts Pro will then add all 5 appropriate extensions
    • Enable: When Font Setup is set to advanced
    • Default:
  • Italic: (input) Enter a a base url and file name without an extention. For example http://fonts.myServer.com/muso Fonts Pro will then add all 5 appropriate extensions
    • Enable: When Font Setup is set to advanced
    • Default:
  • Bold Italic: (input) Enter a a base url and file name without an extention. For example http://fonts.myServer.com/muso Fonts Pro will then add all 5 appropriate extensions
    • Enable: When Font Setup is set to advanced
    • Default:
  • Info: IMPORTANT: Remember to exclude extensions in the font file urls defined above

  • Add Extensions: (checkbox-4) Select the font file types that will be used
    • Enable: When Font Setup is set to advanced
    • Default: [true, true, true, false]
  • ****: (checkbox-2) Select the font file types that will be used
    • Enable: When Font Setup is set to advanced
    • Default: [true, false]

  • Fallback Font: (select) This is the font that will be used if the selected font cannot be downloaded from the server or is unavailable for any reason
    • Default: Sans Serif
    • Possible Values:
      • Sans Serif
      • Serif
      • Cursive
      • Fantasy
      • Monospace
      • -
      • Custom Fallback
  • Custom Fallback: (input) A custom list of fallback font families. You can specify multiple fallbacks separated with a comma. Any font families with a space must be enclosed inside double quotes
    • Enable: When Fallback Font is set to custom
    • Default: “Helvetica Neue”, Helvetica, Arial

Apply Font Family To:

  • Apply To: (button-4) Apply to page elements or a custom Vault
    • Default: [false, false, false, false]

  • Selectors: (input) Advanced: Enter a list of css selectors, separated by commas. Each selector should be preceded by a dot. Your Entry here should form a valid CSS multiple element selector statement.
    • Enable: When Apply To is set to true
    • Default:

  • Custom Class: (input) You can enter a unique class name which will recieve this font definition. This can be used anywhere in your page to apply this font defiintion with the appopriate CSS
    • Enable: When Apply To is set to true
    • Default:

  • Add to Font Vault: (select) Add this font to a Font Vault for easy access in other stacks that support Font Vaults
    • Enable: When Apply To is set to true
    • Default: Vault 1
    • Possible Values:
      • Vault 1
      • Vault 2
      • Vault 3
      • Vault 4
      • Vault 5
      • Vault 6
      • Vault 7
      • Vault 8
  • Apply to Children?: (checkbox) Also apply the family to the direct children of the Font Vault container.
    • Enable: When Apply To is set to true
    • Default: false

  • Page Wide Default?: (checkbox) Set the font as a default style for all fonts on the page. Font will be applied to html and body elements
    • Enable: When Apply To is set to true
    • Default: false
  • Page Elements: (button-4) Select items that will use this web font
    • Enable: When Apply To is set to true
    • Default: [true, false, false, false]
  • ****: (button-4) Select items that will use this web font
    • Enable: When Apply To is set to true
    • Default: [false, false, false, false]
  • ****: (button-4) Select items that will use this web font
    • Enable: When Apply To is set to true
    • Default: [false, false, false, false]

Advanced

  • Force: (button) NOTE: Only use this setting in exteme cases! Force this font to display with a !important. Remember adding this will override any further fonts below that you may define on elements that also posses the class types that this font is applied to.
    • Default: [false]