How to Add an H4 to Squarespace

For most sites, having three header font options is more than sufficient - especially if you’re using a template that allows for alternate font colors on overlays. However, there are some time when you just need an extra bonus heading font even if it’s just a variation of one of the already established H1-H3 font styles. Here’s a quick tutorial on how to do that using custom CSS and adding a markdown block to your page. This may seem advanced at first but it’s actually super easy and anyone can do it!

Step 1 - Add Custom CSS

First we have to define what your new H4 font will look like. To do this, you’re just going to add a quick bit of code to your site. To access the Custom CSS panel from your home screen just go to Design > Custom CSS.

In the box, paste the following code:

h4 {
  font-family: Futura;
  font-weight: 600;
  font-size: 24px;
}
Squarespace’s Custom CSS feature can be found in the Design panel.

Squarespace’s Custom CSS feature can be found in the Design panel.

This code obviously contains placeholder text for font, weight and size that you can replace with your own. Here are some additional css elements that you can add to change the appearance of your font:

To change the color of your font, you can add this specification and then enter a color name, HEX code or RGB values:

color: white;

To change the default case of the text you can use text-transform and change to uppercase, lowercase or capitalize:

text-transform: capitalize;

You can edit the text even further with additional CSS but these are the most common style edits needed and should cover most types of font tweaks.

Step 2 - Add A Markdown Block To Your Page

Now to use your new font! Insert a markdown at the place on your page where you would like to add some H4 text.

In the box that pops up, you’ll just add four hashtags to the left of the text that you want to be an H4. That’s it!

Insert a Markdown block from the content insertion point. It’s the second option in the Basic category of content blocks.

Insert a Markdown block from the content insertion point. It’s the second option in the Basic category of content blocks.

Font Best Practices

Using this same method, you can add even more fonts to your site! Have fun with this but be sure to keep it consistent with the rest your site and the other fonts used so your site doesn’t feel too crazy. Keeping just 2-3 fonts max is a good rule of thumb and most of those should just be variations of the same font or font family whenever possible. Adding H4 (or H5 and H6) fonts should really be used just to add variations of your other fonts and not to introduce a new style entirely.