How can I add H4 and H5 to Squarespace?

Want more heading formats than Squarespace provide? You can add more heading formats on any Squarespace template. It doesn’t matter if you on the Personal Plan (without Premium Features) because do it without Code Blocks. All you need is some Custom CSS and Markdown Blocks.

Let’s get started and experiment with some headings.

On a page of your Squarespace website, add a Markdown Block. Add the following text to the block:

# This is an example of Heading 1

## This is an example of Heading 2

### This is an example of Heading 3

#### This is an example of Heading 4

##### This is an example of Heading 5

When you save the page, you should see three formatted headings (H1, H2 and H3) followed by two unformatted headings because you don’t have styles for H4 and H5. As you can see, the number of hash characters indicates the type of heading. For more markdown information, see the Markdown Cheat Sheet provided by Squarespace.

Adding the Styles

Now go to **Design** > **Custom CSS** to add the styles for your new H4 and H5 headings. For example:

h4 {
  color: red;
  font-family: Rubik;
  font-weight: 300;
  font-size: 20px;
}
h5 {
  color: green;
  font-family: Rubik;
  font-weight: 300;
  font-size: 16px;
}

You can add whatever formatting you like between the braces to style the H4 and H5 headings, but the font-family must already be in use on your website. If you choose a font-family name that isn’t already selected in the Style Editor, it won’t display correctly.

Using this in practice

Whenever you want to add a H5 header to your website, add a Markdown Block and prefix the heading name with four hash characters like this:

##### This is my H5 title