Add another heading to Squarespace without using code blocks (7.0, 7.1CE & 7.1FE)

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.

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.

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*/
} 

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.

Hope you found this neat little trick useful!

Until next time,

B.

Beatriz Caraballo

Hey! I’m B.

I’m a self-proclaimed Squarespace Customization Geek dedicated to helping fellow designers speed up their workflow, grow their coding skills and enjoy the heck out of coding.

https://beatrizcaraballo.com
Previous
Previous

How to overlap headings in Squarespace

Next
Next

Edit a specific banner in the Five template