Google 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 Google Font
  • Family Name: (input) Enter the font name exactly as it appears on the Google fonts web site. Ensure that capitals and spaces are identical.
    • Default: Font Family
  • Script Subset: (select) Download addition language glyph subsets to support extra characters.
    • Default: Latin (default)
    • Possible Values:
      • Latin (default)
      • Latin Extended (latin-ext)
      • Arabic
      • Bengali
      • Cyrillic
      • Cyrillic Extended
      • Devanagari
      • Greek
      • Greek Extended
      • Gujarati
      • Hebrew
      • Khmer
      • Tamil
      • Telugu
      • Thai
      • Vietnamese
  • 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.

Google Font - Setup

  • Normal: (select) If you select a weight that is not listed on the Google Fonts page for the font you have selected then IT WILL NOT DISPLAY
    • Default: 400
    • Possible Values:
      • 100
      • 200
      • 300
      • 400
      • 500
      • 600
      • 700
      • 800
      • 900
  • Bold: (select) If you select a weight that is not listed on the Google Fonts page for the font you have selected then IT WILL NOT DISPLAY
    • Default: Inherit
    • Possible Values:
      • Inherit
      • 100
      • 200
      • 300
      • 400
      • 500
      • 600
      • 700
      • 800
      • 900
  • Italic: (button-2) Do you want to load the italic variant for the defined weights
    • Default: [false, 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]
  • Foundation Only: (button) Load the Google Fonts asynchronously. This feature only works with the Foundation theme. If you are seeing a flash of unstyled content, you may need to enable the Foundation Site Preloader or not use this setting
    • Default: [false]