TypeKit 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 TypeKit Font
  • Family Name: (input) Enter the font fmaily name exactly as it appears on the Typekit fonts web site. Ensure that capitals and spaces are identical.
    • 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]

TypeKit Font - Setup

  • Load TypeKit: (select) How to load your TypeKit kit into your project. If you are seeing FLOUC with the rocket loader, then you may need to turn that off or use a site preloader. If set to manual, you need to place the TypeKit snippet inside the Site Wide Header or Page Header
    • Default: Default Loader
    • Possible Values:
      • Default Loader
      • Rocket Loader
      • Already Loaded (manual)
  • Info: Ensure that the TypeKit embed code has been added to the Header or loaded from another TypeKit stack.
  • TypeKit ID: (input) The kit id provided on the TypeKit website
    • Enable: When Load TypeKit is set to default
    • Default:
  • TypeKit ID: (input) The kit id provided on the TypeKit website
    • Enable: When Load TypeKit is set to ajax
    • Default:
  • Asynchronous Load?: (checkbox) Load Typekit Asynchronously. This will load the fonts faster but could also cause FLOUC
    • Enable: When Load TypeKit is set to default
    • Default: false
  • Asynchronous Load?: (checkbox) Load Typekit Asynchronously. This will load the fonts faster but could also cause FLOUC
    • Enable: When Load TypeKit is set to ajax
    • Default: false

  • Default Weight: (select) The weight of the font. This can be used if you want to ensre that the text assigned to this family receives this wieght
    • Default: Inherit
    • Possible Values:
      • Inherit
      • 100
      • 200
      • 300
      • 400
      • 500
      • 600
      • 700
      • 800
      • 900
  • Default Style: (select) The style of the font. This can be used if you want to ensre that the text assigned to this family receives this style
    • Default: Inherit
    • Possible Values:
      • Inherit
      • Normal
      • Italic

  • 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
  • Info: In order to preview your fonts, you must add “localhost” to your domain list in TypeKit (RW7 only)

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]