How to Set Different Heading Fonts in Squarespace 7.1
Oh hey fellow go-getter! So you’ve hopped onto the bandwagon of Squarespace 7.1 and you’re wondering how to tweak the heading options on your website? In this post I’ll be talking about how to set different heading fonts on your Squarespace website.
You’ve probably realized it’s possible to have a different font for your heading and paragraphs but it’s not possible to have multiple fonts for your headings and multiple fonts for your paragraphs.
Well there’s good news and great news! With an easy tweak, you can absolutely use different fonts for your headings across your site.
So let’s get down to biz!
How to use different heading fonts in Squarespace 7.1
In Squarespace 7.1, there are 4 different heading options:
Extra large heading = heading 1 or h1
Large heading = heading 2 or h2
Medium heading = heading 3 or h3
Small heading = heading 4 or h4
When you set your site styles in your style editor before you build the site, it might look a little like this. (I had some fun with the colors 💁🏽).
All the headings in this example have been set to the font freight-display-pro and all the paragraphs have been set to proxima nova.
But what if you’d like to change the large heading to be proxima nova or some other font?
The good news is with a little bit of copy and paste CSS, you’ll be able to change any of the heading fonts for your entire Squarespace site.
The best part is that it really doesn’t matter what template you started on in Squarespace. Because they’re all the same! High five to Squarespace for that one!
How to add CSS to change a heading font in Squarespace
Now let’s say I want the large heading to be proxima nova instead of freight-display-pro. Take another look at the table above. Your large heading is also known as your heading 2, shortened to h2.
Head over to your backend of Squarespace -> Design -> Custom CSS
Paste the below code replacing proxima nova with the name of your font.
h2 {
font-family: proxima nova;
}
The large heading has now switched to proxima nova.
Now what if you wanted the boldness of the font to be thicker (font weight), the style to be always italic, increase the letter spacing and the line height to be more spaced out?
Copy and paste this code into the Custom CSS window and edit the bold values.
h2 {
font-family: proxima nova;
font-weight: 700;
line-height: 1.8em;
font-style: italic;
letter-spacing: .3em;
}
I’ve ended up with something like this.
Easy peasy right?
Now go try it yourself! But before you go...
Additional font options in the Advanced Fonts panel
There are some additional font options if you click to open the Advanced Fonts panel. Head over to:
Home Menu > Design > Fonts > (click the gear icon of your select Font Pack) > Advanced
In this panel, you'll see font options for different text across your site, for example, if you were using a Newsletter or Form Block, you'd see options for the text of that block in the Advanced Fonts panel. You can also customize your Site Navigation, Quote blocks, and Form blocks.
Okie dokies…Hope this was helpful!
Stay safe and good luck!
