When designing your website it’s important to choose the right typography (text) over your header image. If the font styles are difficult to read, visitors may leave your site quickly. Choose simple, but stylish, fonts for your website’s header.

Note: You can change the font type, colour, and size for your design at anytime, and as often as you like without removing your website content.

This help article provides information about fonts in the header area, including title and call-to-action features. For details about fonts in other areas of your website please view the ‘Font Options’ help article.

How to adjust your header font:

  1. From the ‘Edit Theme’ tab, scroll through the settings pane on the left to the ‘Menu’ area
  2. Adjust the font style and color options for your title or call-to-action feature

Steps for changing font color

  • Click the color swatch to change the color
    • 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

Site title (Title/Logo area) font options

  • Site title font color: Click the color swatch to change the color
  • Site title font:
    • Site title font: Click the dropdown and select the font you’d like to use
    • Font size: Use the slider to adjust the font size
    • Letter spacing: Use the slider to adjust the spacing between the letters in your title
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  • Scroll to the bottom of the settings pane and click ‘Save’

Note: You can add a logo (image file) instead of title text through the ‘LOGO’ tab here, or select ‘NONE’ to have no visible site title.

Call-to-action (CTA) font options

This controls the font style and color for the call-to-action feature, which displays over top of your header image. Add text to the CTA from the ‘Edit Content’ tab by clicking on the call-to-action feature.

  • Heading color: Choose the color of your main heading
  • Subheading color: Choose the color of your subheading
  • Heading font:
    • Heading font: Click the font drop-down and choose the font you’d like to use
    • Letter spacing: Use the slider to adjust the spacing between the letters in your title
    • Uppercase: Toggle on or off for all upper or lowercase lettering
  • Subheading font:
    • Heading font: Click the dropdown and click on the font of your choice
    • Font style: Choose the weight of your font
    • Letter spacing: Use the slider to adjust the spacing between the letters in your title
    • Uppercase: Toggle ON or OFF to apply or remove uppercase lettering
  • Scroll to the bottom of the settings pane and click ‘Save’

Notes:

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

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.