Add another heading to Squarespace without using code blocks

So, you want to be able to add a custom h4, h5 or h6 to your Squarespace site, or even better, be able to add a specific font WITHIN one of the default Squarespace headings without having to add a code block with HTML,  every single time?

Then take a look!

 

Start with one of the three regular Headings you have in your text toolbar and write your text as usual. In this example I'll be using Heading 1.

Creating a heading 1.png

Next, select the word you want to highlight, or the entire text if that's your case, and make it both bold AND italic, so you don't limit your styling options later on. You'll see why in a minute.

Setting one word as bold and italics.png

Now, go into your CSS window and add the selectors for that styled heading. In this case it would be:

h1 em strong {
}

 

Lastly, add all styling properties you like!

/*New heading styles*/
h1 em strong {
  color: lightpink;
  font-family: pacifico;
  font-style: normal; //if you want to remove the italics
  font-weight: normal; //if you want to remove the bold style
  text-transform: none; //if you want to remove the all uppercase or lowercase style
}
Adding custom CSS to style one word inside a heading.png

Ta-da! You're done!

 

If you want to use the new custom font as a completely different heading then make sure to set all your title text as both bold and italics.

 

The trick about doing it this way is that you can still profit from using only bold OR italics whenever you need to, without bringing up the new font.

Using different fonts in the same heading in Squarespace.png

 

Hope you found this neat little trick useful!

 

Until next time,

B.

 

Save now to save time later!


FOLLOW ME FOR MORE!