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 smooth viewing experience for your site visitor.

Most 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 a font color:

  1. From the ‘Edit Theme’ tab, scroll through the settings panel 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 map/slider and select a new color
    • Enter the hex code for the color you’d like to use
  3. Click the ‘save’ button on the color selector panel
  4. Click ‘Save’ at the bottom of the settings pane to apply the change to your live website

Site title font options ('TITLE/LOGO' section)

  1. Site title font color: Click the color swatch to change the site title font color

  2. Click the arrow beside 'Site title font' to access site title font style options:

    • Site title font: Click the dropdown field and select the font of your choice

      Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

      Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

      Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font size: Use the slider to adjust the font size, from 16px to 250px

    • Letter spacing: Use the slider to adjust the spacing between letters, from -0.20em to +2.00em
    • Apply letter spacing on mobile: Toggle on to force the letter spacing settings onto mobile display (instead of having the site title text auto-size to fit the device display)
    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering
    • Custom mobile size: Toggle on to set these custom font size settings for mobile:
      • Tablet font size: Use the slider to adjust the site title font display size on table devices, from 16px to 220px
      • Mobile font size: Use the slider to adjust the site title font display size on table devices, from 16px to 105px

  3. Click ‘Save’ at the bottom of the settings panel to apply the changes to your live website

Menu font options ('MENU' section)

  1. Click the color swatch to change the color next to the following settings:

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

      Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

      Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

      Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font size: Use the slider to adjust the font size, from 16px to 250px

    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering

  3. Click ‘Save’ at the bottom of the settings panel to apply the changes to your live website

Content font options ('CONTENT' section)

Font settings in this section control the appearance of font for all the content text in the body of your website.

  1. Click the arrow next to the setting title for the following content font options:

    'Content font'

    • Content font: Click the dropdown field and select the font of your choice

    Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

    Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

    Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font size: Use the slider to adjust the font size, from 10px to 20px
    • Line height: Use the slider to set how much space you’d like between lines of text, from 0.8 to 3.0
    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering
    • Link style: Set to 'underline' to have links underlined, or 'none' for no underline

    'Title font'

    • Feature title font: Click the dropdown field and select the font of your choice

      Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

      Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

      Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font style: Choose the weight of your font

    • Font size: Use the slider to adjust the font size, from 10px to 72px
    • Line height: Choose how much space you’d like between lines of text, from 0.8 to 3.0
    • Letter spacing: Use the slider to adjust the spacing between letters in your titles, from -0.20em to +2.00em
    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering

    'Heading 1 font'

    • Heading 1 font: Click the dropdown field and select the font of your choice

      Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

      Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

      Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font size: Use the slider to adjust the font size, from 10px to 42px

    • Line height: Choose how much space you’d like between lines of text, from 0.8 to 3.0
    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering

    'Heading 2 font'

    • Heading 2 font: Click the dropdown field and select the font of your choice

      Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

      Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

      Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font size: Use the slider to adjust the font size, from 10px to 42px

    • Line height: Choose how much space you’d like between lines of text, from 0.8 to 3.0
    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering

  2. Click ‘Save’ at the bottom of the settings panel to apply the changes to your live website

Section font options ('SECTION STYLE 1,' 'SECTION STYLE 2,' and 'SECTION STYLE 3' sections)

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

Note: Section styles are applied to specific page sections in the 'Edit Content' tab. To learn about how to apply your three section styles to specific page sections, please see the 'Styled Website Sections' Help article.

  1. Click the color swatch to change the following Section Style section style font colors, for each of the 'SECTION STYLE 1,' 'SECTION STYLE 2,' and 'SECTION STYLE 3' sections:
    • 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 panel to apply the changes to your live website

Call-to-action font options ('CALL-TO-ACTION HEADER' section)

This controls font style and color for the ‘Call-to-action’ feature, which displays overtop of the header image. (The 'Call-to-Action' feature is available only on certain themes.)

  1. Click the color swatch to change colors on the following 'Call-to-Action' feature elements:

    • Heading color: Choose the color of your main heading
    • Subheading color: Choose the color of your subheading
    • Description color: Choose the color of the description text that appears when using the 'Mailing list signup' option in the 'Call-to-Action' feature

  2. Click the arrow next to the setting title for the following content font options:

    'Heading font'

    • Heading font: Click the dropdown field and select the font of your choice

      Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

      Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

      Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font size: Use the slider to adjust the font size, from 14px to 180px

    • Line height: Choose how much space you’d like between lines of text, from 0.8 to 3.0
    • Letter spacing: Use the slider to adjust the spacing between letters, from -0.20em to +2.00em
    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering

    'Subheading font'

    • Subheading font: Click the dropdown field and select the font of your choice

      Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

      Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

      Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font size: Use the slider to adjust the font size, from 14px to 180px

    • Line height: Choose how much space you’d like between lines of text, from 0.8 to 3.0
    • Letter spacing: Use the slider to adjust the spacing between letters, from -0.20em to +2.00em
    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering

    'Description font'

    • Description font: Click the dropdown field and select the font of your choice

      Note: you can filter the fonts by style categories using the row of 'A' buttons. The font style category filters appear in this order, for each 'A' button, from left to right: 'Sans serif,' 'Serif,' 'Slab serif,' 'Monospaced,' 'Handwritten,' and 'Display.'

      Note: Pro members can click the 'upload custom font' button to upload a font file (OTF or TTF file formats only)

      Note: Some fonts include style variants. If your selected font has style variants, you'll see a second drop-down window appear, where you can select the desired variant for your font (light, regular, bold, italic, black, etc.)

    • Font size: Use the slider to adjust the font size, from 14px to 180px

    • Line height: Choose how much space you’d like between lines of text, from 0.8 to 3.0
    • Letter spacing: Use the slider to adjust the spacing between letters, from -0.20em to +2.00em
    • Uppercase: Toggle on/off to apply/remove all-uppercase lettering

  3. Click ‘Save’ at the bottom of the settings panel to apply the changes to your live website

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.