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!

Related: want to learn how to use even more css tricks like these on your Squarespace site? Then join my free code training!

 

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.

We’re going to add them in two different ways to make sure that regardless of if your italics are wrapping your bold text or viceversa, the styles are applied:

h1 em strong,
h1 strong em { }

 

Lastly, add all styling properties you like!

/*New heading styles*/
h1 em strong,
h1 strong em {
  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.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way