Inline 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 Inline 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) 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]

Font Family Source Files

  • Base64 Type: (select) The type of font file that you will be encdoing into base64 strings and pasting into the settings below
    • Default: WOFF (recommended)
    • Possible Values:
      • WOFF (recommended)
      • WOFF2
      • TTF
      • OTF
  • Normal: (input) The data string for your base64 encoded font file. If left blank, no font-face will be defined for this weight/style
    • Default:
  • Bold: (input) The data string for your base64 encoded font file. If left blank, no font-face will be defined for this weight/style
    • Default:
  • Italic: (input) The data string for your base64 encoded font file. If left blank, no font-face will be defined for this weight/style
    • Default:
  • Bold Italic: (input) The data string for your base64 encoded font file. If left blank, no font-face will be defined for this weight/style
    • Default:
  • Info: Paste the base64 encoded font data only. Ensure that there are no spaces before or after.

  • 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]