How to change individual heading fonts on Squarespace
Squarespace is an amazing platform that allows for seamless design and user-friendly controls. With that being said, sometimes you may find that they have oversimplified some features and taken away your ability to fully customize your website design. Luckily they allow for custom CSS and HTML in some key places that will allow you to make additional customizations that fit your brand and design needs.
One design addition I find myself needing often when designing websites for my clients is the ability to change the font of each individual heading and not the whole heading family. Squarespace has an ever evolving catalog of fonts from you to choose from to use across your website and make your brain stand out. However when choosing the font for your heading it will set that font as a global heading font to be used across all large and small headings on your pages. While this may be useful for most brands, there are instances where you would want the ability to customize each individual font or perhaps make type additions, like making a heading size permanently bold.
I have found this extremely useful when using a cursive font as the main font for a website. Often times you only need this cursive/script font when using an h1 or h2 tag and it may become harder to read when using your medium sized headings throughout your website. In this case, I will usually change the h3 and h4 tags to a sherif font so that I can have readable headings on my website and make the cursive font stand out even more.
Squarespace Heading Fonts Explained
When designing your squarespace website you will be given a set of six different font sizes to use throughout your site. Four of these will be heading fonts, two will be paragraph fonts, and the last will be a model space font. The heading fonts are also known as “h-tags” and dictate the hierarchy of importance not only for your website visitors but also for robot crawlers when reading your website.
The standard heading fonts are as follows :
H1 - Extra Large Heading
H2 - Large Heading
H3 - Medium Heading
H4 - Small Heading
You can change and personalize your headings as a group by going to Design >> Site Style >> Fonts.
Let's Jump Into the Code
Before you can input the code you will need to navigate to your Squarespace admin. Go to Design >> Custom CSS
Paste the following code for every heading you would like to change:
h3 {
font-family: Poppins;
}
You can change the font family to any of the fonts available for use on Squarespace.
If you wanted to change more than one of your headings your code may look like this:
h3 {
font-family: Poppins;
}
h4 {
font-family: Poppins;
}
Taking it a Step Further
It is possible to customize your font even further than changing the font family. Using the same method you can change the style, weight, and spacing of your headings.
Look at this code:
h3 {
font-family: Poppins;
font-weight: 600;
line-height: 1.2em;
font-style: italic;
letter-spacing: .3em;
}
Here you can see that there are multiple places in the code where you can customize individual headings that do not affect the rest of the heading sizes.
Things to remember
While it is possible to customize your site using the technique above to change all four headings on your site to different fonts this is not something that is best practice or advised. Having too many different fonts across your site can be confusing and distracting for your site visitors. Try to keep your font selection to a minimum and only use these codes if you feel that it better delivers your brand’s message and makes for seamless design.