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, color, and size for your design at any time, 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.

This article includes:

  • How to adjust your header font
  • Site title font options
  • Call-to-action font options

How to adjust your header font

The header font is a place to design a great looking artist name or logo for your band website. You can choose to add stylized text, or upload a logo in the Title/Logo section. Then, customize the text that sits over your header image in the call-to-action header section if your theme supports this option.

  1. From the ‘Edit Content’ tab, click on your site title or your call-to-action text to open the settings pane on the left of the screen
  2. Adjust the font style and color options for your title

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

Title/Logo Font Options:

  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
    • Site title: Enter your band name
    • Site title font color: Choose a swatch from your theme's color palette, or add your own.
  3. Site title font: Click the dropdown and select the dont 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.
    • Uppsercase: Toggle ON or OFF to apply or remove uppercase lettering.
    • Custom mobile size: Toggle on to change the Tablet font size and Mobile font size.
  4. 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.

Looking to create a band logo? Check out: How to create a band website logo you love.

Call-to-Action Header font options

The call-to-action header, or CTA, is a great way to promote new music and merch, or grow your mailing list. 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. Not every theme offers the CTA header, so you may not see it as an option on yours.

The styling options for your call-to-action are as follows:

  • Heading color: Choose the color of your main heading
  • Subheading color: Choose the color of your subheading
  • Description color: If using a Mailing List Signup CTA, choose the color of your description font
  • Heading font:
    • Heading font: Click the font drop-down and choose the font you’d like to use
    • Font size: Choose the size of your font
    • Font style: Choose to make your font bold or italic
    • Line height: Set the height between your lines of text
    • 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:
    • Subheading font: Click the dropdown and click the font of your choice
    • Font size: Choose the size of your text
    • Font style: Choose the weight of your font
    • Line height: Set the height between your lines of text
    • 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.