When designing your website it’s important to choose the right typography (text). If the font styles are difficult to read, visitors may leave your site quickly. Simple but stylish fonts deliver a pleasant viewing experience for your site visitor.

All font styling is controlled in the ‘Edit Theme’ tab. This help article includes the font options in the following areas:

  • Site title
  • Menu
  • Content
  • Sections
  • Call-to-action header

Notes: You can change the font type, colour, and size at anytime, and as often as you like.

  • Color
    • Each template is pre-loaded with its own 9-color palette, but you can customize these selections to suit your style.
  • Font style
    • The Bandzoogle font selector offers over 100 fonts in different style categories. Custom fonts can also be uploaded through our Pro plan.

How to change the font color:

  1. From the ‘Edit Theme’ tab, scroll through the settings pane on the left to the section settings you’d like to update
  2. Click the color swatch, and select from the following options:
    • Choose a preset color from the swatches
    • Click the color wheel and select a new color
    • Enter the hex code for the color you’d like to use
  3. Click the ‘choose’ button
  4. Click ‘Save’ at the bottom of the settings pane to apply the change

Site title font options (Title/Logo area)

  1. Set site title font color: Click the color swatch to change the color
  2. Set site title font:
    • Site title font: Click the dropdown field and select on the font of your choice
    • Font size: Use the slider to adjust the font size
    • Letter spacing: Use the slider to adjust the spacing between letters
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  3. Click ‘Save’ at the bottom of the settings pane to apply the changes

Menu font options

  1. Click the color swatch to change the color next to the following:
    • Menu font color: Color of the text in your site’s navigation menu
    • Menu font hover color: Color that appears when you place your cursor over the menu links
    • Submenu background color: Color that appears behind the submenu buttons
    • Submenu font color: Color of the submenu text
    • Mobile font color: Color of the menu text on mobile devices
    • Menu bar background color: Color that appears behind the menu buttons
    • Mobile background color: Color that appears behind the menu text on mobile devices
  2. Click the arrow for menu font options
    • Menu font: Click the dropdown field and select the font of your choice
    • Font style: Choose the weight of your font
    • Font size: Use the slider to adjust the font size
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  3. Click ‘Save’ at the bottom of the settings pane to apply the changes

Content font options

  1. Click the arrow for content font options: (Controls the font for all the content in the body of your website)
    • Content font: Click the dropdown field and select the font of your choice
    • Font style: Choose the weight of your font
    • Font size: Use the slider to adjust the font size
    • Line height: Choose how much space you’d like between lines of text
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
    • Link style: Choose to have links underlined or not
  2. Click the arrow for title font options: (Controls the font for the ‘Title’ feature and section titles)
    • Feature title font: Click the dropdown field and select the font of your choice
    • Font style: Choose the weight of your font
    • Font size: Use the slider to adjust the font size
    • Line height: Choose how much space you’d like between lines of text
    • Letter spacing: Use the slider to adjust the spacing between letters in your titles
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  3. Click the arrow for heading 1 font options: (Controls the font for the ‘Text’, ‘Image and Text’, and ‘Blog’ features)
    • Heading 1 font: Click the dropdown field and click on the font of your choice
    • Font style: Choose the weight of your font
    • Font size: Use the slider to adjust the font size
    • Line height: Choose how much space you’d like between lines of text
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  4. Click the arrow for heading 2 font options: (Controls the font for the ‘Title’ feature and section titles)
    • Heading 2 font: Click the dropdown field and select the font of your choice
    • Font style: Choose the weight of your font
    • Font size: Use the slider to adjust the font size
    • Line height: Choose how much space you’d like between lines of text
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  5. Click ‘Save’ at the bottom of the settings pane to apply the changes

Section Font Options

The same font options are available for section styles 1, 2, or 3 and these control font colors in the corresponding sections.

  1. Section style:
    • Content font color: Choose the color of your content font
    • Link color: Choose the color of linked content
    • Title font color: Choose the color for titles
    • Heading 1 font color: Choose the color for heading 1 content
    • Heading 2 font color: Choose the color for heading 2 content
  2. Click ‘Save’ at the bottom of the settings pane to apply the changes

Call-to-action font options

This controls the font style and color for the ‘Call-to-action’ feature, which displays overtop of the header image.

  1. Click the color swatch to change call-to-action colors:
    • Heading color: Choose the color of your main heading
    • Subheading color: Choose the color of your subheading
  2. Click the arrow for heading font options:
    • Heading font: Click the dropdown field and select the font of your choice
    • Letter spacing: Use the slider to adjust the spacing between letters
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  3. Click the arrow for subheading font options:
    • Heading font: Click the dropdown field and select the font of your choice
    • Font style: Choose the weight of your font
    • Letter spacing: Use the slider to adjust the spacing between letters
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  4. Click ‘Save’ at the bottom of the settings pane to apply the changes

Best practices:

  • Avoid using too many colors on your website. Stick to three or four major colors to keep the visuals consistent: a primary ‘brand’ color, one or two ‘complimentary’ colors, and an ‘accent’ color.
  • Eccentric fonts may seem cool, but if they’re hard to read they can discourage site visitors. Fonts with curls, swirls, jagged edges, or stripes can look playful but are unprofessional. Keep bold and italic to a minimum. Also reserve all-caps for titles and headings.