Zen's Brand Designer allows you to manage and style the fonts of your Zen site/space. At the simplest level, you can define font stacks using the Font Family text field located in each of the following areas:

  • Toolbar
  • Search text box
  • Menu
  • Space Name
  • Columns
  • Titles & Headings
  • Text

Custom Fonts

For those of you that would like to use web fonts, the Custom Fonts area of the Brand designer allows you to add Google or Typekit fonts. For Typekit fonts, you need your ID. For Google fonts, you need a Google-supplied html code. (If you're not using web fonts, you can also bundle custom fonts into your brand.)

Once added, enter the custom font in the Font Family text field of any sections previously mentioned.



Generate Typekit ID

To generate your Typekit Kit ID, complete the following procedures. (You need an active Typekit account in order to complete these procedures.)

  1. Log into your Typekit account.
  2. Near the top-right of the Typekit window, click the Add New Kit button.
  3. The Create a Kit window opens.
  4. In the Name text box, enter a name for the kit.
  5. In the Domains text box, enter the URL for your Confluence site::

    localhost, <Confluence_URL>
  6. Click the Continue button.
  7. Follow the Typekit instructions to add fonts to your kit.
  8. Near the top-right of the Typekit window, click the Launch the Kit Editor button.
  9. The typekitEditor window opens.
  10. Near the top-right of the window, click the Embed Code link.
  11. A JavaScript Code window opens.
  12. At the bottom-right of the window, make note of the Typekit Kit ID.

Generate Fonts.com ID

Once you've set up your account on Fonts.com (and selected your font), you should be supplied with a code for webfont inclusion.

Simply enter that code in the Brand Designer fonts.com field, and hit apply. 


Generate/Obtain Google Font HTML Code

Simply enter the Google-provided @import code in the Google Font Imports field. You can then refer to this font throughout the brand designer.

Want more than one font?

You can add more than one Google font - just separate with a space. Note, though, that the code needs to be inserted exactly as provided by Google. Watch those semicolons! (wink)